css超出一行添加省略号属性:text-overflow和white-space

CSS文本溢出与换行技巧

最新推荐文章于 2025-09-24 14:47:24 发布

转载最新推荐文章于 2025-09-24 14:47:24 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/douglasvegas/p/5420425.html

本文详细解析了CSS中white-space、text-overflow和word-wrap属性的使用技巧，展示了如何通过这些属性控制文本的换行、溢出显示省略号及强制断行，适用于各种浏览器环境。

css属性white-space

<p style="width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">省略我吧 省略我吧省略我吧省略我吧省略我吧省略我吧省略我吧省略我吧省略我吧省略我吧</p>

测试浏览器： 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；

css超出一行添加省略号属性:text-overflow和white-space

2.white-space属性

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 html 中的 <pre> 标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。
Object.style.whiteSpace=normal|nowrap|pre

3.word-wrap

1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

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;无法起作用

转载于:https://www.cnblogs.com/douglasvegas/p/5420425.html