CSS3文本换行word-wrap解决英文文本超过固定宽度不换行


Posted in HTML / CSS onOctober 10, 2013

大家在制作的时候有时候会碰到英文文本超过固定宽度,不会自己换行的问题。这种问题以前解决的时候大多都用overflow:hidden或者JavaScript来控制,让其看起来接近完美。当CSS3出现的时候,我们就可以用CSS3之文本换行word-wrap来解决这个问题了。下面就为大家介绍一下CSS3之文本换行word-wrap吧。

一、word-wrap的语法

1、语法

复制代码
代码如下:

word-wrap : normal || break-word

2、取之说明
(1)normal和break-word,其中normal为默认值,当其值为normal控制连续文本换行(允许内容顶开容器的边界,换句话说内容可以撑破容器);
(2)break-word将内容在边界内换行

二、word-wrap的兼容情况
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行 

三、word-wrap的实例

CSS代码:

复制代码
代码如下:

div {width:300px;height:200px;border:1px solid #ccc;word-wrap:break-word;}

HTML代码:
复制代码
代码如下:

<div>menglongxiaozhan menglongxiaozhan 梦龙小站 menglongxiaozhan menglongxiaozhan menglongxiaozhan menglongxiaozhan menglongxiao
zhan menglongxiaozhan menglongxiaozhanmenglongxiaozhanmenglongxiaozhan menglongxiaozhan menglongxiaozhan</div>

预览效果:
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行 
CSS3之文本换行word-wrap就为大家介绍到这里,这个属性基本上兼容所有主流浏览器,是个不错的属性哟。更多CSS3属性方面的介绍,尽情关注本blog的更新。
HTML / CSS 相关文章推荐
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 #HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 #HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 #HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 #HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 #HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 #HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 #HTML / CSS
You might like
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
PHP实现中文圆形印章特效
2015/06/19 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
js 控制页面跳转的5种方法
2013/09/09 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
简介JavaScript中search()方法的使用
2015/06/06 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
Python实现去除代码前行号的方法
2015/03/10 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python转换时间的图文方法
2019/07/01 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
python函数超时自动退出的实操方法
2020/12/28 Python
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
副护士长竞聘演讲稿
2014/04/30 职场文书
毕业大学生自荐信
2014/06/17 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
爱的教育读书笔记
2015/06/26 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle