注意,一定要指定容器的宽度,不然的话是没有用的。 注意word-break 是IE5+专有属性 语法: word-break : normal | break-all | keep-all 参数: normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 break-all : 该行为与 ...
分类:
Web程序 时间:
2016-11-14 15:26:55
阅读次数:
138
加上CSS * { text-overflow:ellipsis; overflow:hidden; } 如果标签还设置了word-break:break-all;的类似的属性 那还需要加上white-space:nowrap;属性来去除换行,在有换行设置的情况下,我们的text-overflow: ...
分类:
其他好文 时间:
2016-11-14 01:59:22
阅读次数:
201
一、word-wrap使用: 语法: 取值说明: 1、normal为默认值,当其值为normal控制连续文本换行(允许内容顶开容器的边界,换句话说内容可以撑破容器); 2、break-word将内容在边界内换行(不截断英文单词换行,截断英文单词换行需要使用word-break:all属性),我们先来 ...
分类:
Web程序 时间:
2016-11-08 13:32:40
阅读次数:
236
这个问题的开始于我对中文和英文之前区别的一个疏忽(中文是一个字就是一个单词,而英文字母要有一个空格才将他们分割为一个单词); 我们看到有三段文字,本意是将他们划分为三个块,并列排列,结果是这样的: 文字部分没问题,可是英文字母的部分把盒子模型撑的不像样,原因其实很简单就是我上面说的,它们把英文字母当 ...
分类:
其他好文 时间:
2016-10-14 17:08:29
阅读次数:
189
有时候一个又臭又长的单词出现在一个并不宽到足以容纳这个单词时会出现内容溢出容器这种情况: 我们在代码里加入一行代码:word-wrap:break-word; 我们会发现那个长长的单词被断开使其不溢出容器。 这就是word-wrap:break-word的作用,首先起一个新行来放置长单词,新的行还是 ...
分类:
其他好文 时间:
2016-10-03 12:40:41
阅读次数:
413
详细查看以下链接。(转载自张鑫旭大神空间) http://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wrap-break-word/ 详细查看以下链接。(转载自张鑫旭大神空间) http://www.zha ...
分类:
其他好文 时间:
2016-09-30 11:47:26
阅读次数:
128
1.依靠浏览器让文本自动换行 浏览器本身都自带着让文本自动换行的功能。 2.指定自动换行的处理方法 在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法。 div{ word-break:break-all; } 当word-break属性使用break-all参数值时,对于西 ...
分类:
Web程序 时间:
2016-09-03 16:41:14
阅读次数:
169
<style type="text/css"> p{ width: 250px; color: red; overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; } p a{ col ...
分类:
其他好文 时间:
2016-08-23 18:43:50
阅读次数:
117
/*p标签自动换行*/ p{ word-wrap:break-word; word-break:normal; } /*p强制不换行*/ p{ white-space:nowrap; } /*块级元素强制英文单词断行*/ p{ word-break:break-all; } ...
分类:
Web程序 时间:
2016-08-19 13:18:15
阅读次数:
381
1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space:pre-wrap; 只对中文起作用,强制换行 4. white-space:nowrap; 强制不换 ...
分类:
Web程序 时间:
2016-08-17 13:35:19
阅读次数:
175