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按钮动画
Feb 27 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
POST提交数据常见的四种方式
Jan 18 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
php把数组值转换成键的方法
2015/07/13 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
详解python-图像处理(映射变换)
2019/03/22 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
课程改革实施方案
2014/03/16 职场文书
初一新生军训方案
2014/05/22 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
导游词之安徽九华山
2019/09/18 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
MySQL transaction事务安全示例讲解
2022/06/21 MySQL