css超出一行添加省略号属性:text-overflow和white-space
2017-03-31 09:54
375 查看
css超出一行添加省略号属性:text-overflow和white-space
A-A+前端博客•前端开发•CSS•14994View1
文章目录
1、text-overflow: ellipsis;
2.white-space属性
3.word-wrap
通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下HTML代码:
<p>前端开发博客专注前端开发和技术分享,如果描述超过100像素,则会隐藏,添加省略号</p>
CSS:需要加上宽度(width:100px)、超出隐藏(overflow:hidden;)、强制在同一行显示(white-space: nowrap;)、省略号(text-overflow:ellipsis;)
p{width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
测试浏览器: IE6/7/8/9、opera12.02、firefox15.0.1、chrome21.0.1180.89 m
1、text-overflow: ellipsis;
这里的重点样式是 text-overflow: ellipsis;不过话说text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。
这里面需要限定宽度、文字显示在一行中(white-space:nowrap;)和使用隐藏属性overflow。
网上给支持低版本的opera一个办法,就是-o-text-overflow:ellipsis;
2.white-space属性
定义:white-space 属性设置如何处理元素内的空白。实例:规定段落中的文本不进行换行:
p{ [code]white-space: nowrap;}[/code]
可能的值
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
3.word-wrap
定义:word-wrap 属性允许长单词或 URL 地址换行到下一行。实例:允许长单词换行到下一行:
p.test {word-wrap:break-word;}
可能的值:
值 | 描述 |
---|---|
normal | 只在允许的断字点换行(浏览器保持默认处理)。 |
break-word | 在长单词或 URL 地址内部进行换行。 |
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
.a{word-break:break-all; width:200px; overflow:auto;}
.(Firefox浏览器)使用
table-layout:fixed;强制table的宽度,内层td,th采用word- break :
break-all;或者word-wrap : break-word
;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用
相关文章推荐
- css超出一行添加省略号属性:text-overflow和white-space
- css超出一行添加省略号属性:text-overflow和white-space
- css超出一行添加省略号属性:text-overflow和white-space
- css超出一行省略号:text-overflow和white-space超出隐藏显示省略号
- CSS文字超出部分省略(width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;)
- 溢出文字处理CSS属性——text-overflow、word-break、word-wrap和white-space
- [转载 css]word-wrap,word-break,white-space,text-overflow的区别和用法
- CSS用text-overflow实现文本标题超出显示省略号“...”
- word-wrap,white-space和text-overflow属性
- HTML CSS属性overflow、white-space、text-overflow
- CSS overflow white-space CSS3 text-overflow 属性
- [转载 css]word-wrap,word-break,white-space,text-overflow的区别和用法
- [转载 css]word-wrap,word-break,white-space,text-overflow的区别和用法
- CSS样式控制一行文字超出部分显示省略号 text-overflow:ellipsis
- CSS3文本超出容器显示省略号之text-overflow属性
- [转载 css]word-wrap,word-break,white-space,text-overflow的区别和用法
- css基础 text-overflow 文本一行显示,超出部分变为...
- CSS省略号text-overflow超出溢出显示省略号