CSS样式-文字在一行内显示不换行，超出部分用省略号（white-space、overflow、text-overflow、word-wrap、word-break）

样例：

1 <p style="width: 100px; height: 50px; border: 1px solid blue; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
2 例如这样的一行字比较多，一行是显示不了的，那么多出的部分就会用省略号代替
3 </p>

主要是下面的样式起做用：

1 white-space: nowrap;
2 overflow: hidden;
3 text-overflow: ellipsis;

把文本限制在一行（white-space: nowrap;），确定这一行是有限制的(width)，而且你的溢出的部分要隐藏起来（overflow: hidden；），而后出现省略号（ text-overflow: ellipsis）

 

text-overflow 属性规定当文本溢出包含元素时发生的事情。

• clip:修剪文本
• ellipsis:显示省略符号来代替被修剪的文本

要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

 

white-space 属性设置如何处理元素内的空白。（若文本中有"   "或"<br>"不管white-space如何设置都会显示空格或回车）

• normal 默认。空白会被浏览器忽略。
• pre 空白会被浏览器保留。其行为方式相似 html 中的 <pre> 标签。
• nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
• pre-wrap 保留空白符序列，可是正常地进行换行。
• pre-line 合并空白符序列，可是保留换行符。
• inherit 规定应该从父元素继承 white-space 属性的值。

word-wrap、word-break 和white-space的区别：

word-wrap 属性容许长单词或 URL 地址换行到下一行。

• normal 默认，只在容许的断字点换行（浏览器保持默认处理，通常是空格处）
• break-word 在长单词或url地址内部进行换行

word-break 属性规定自动换行的处理方法。

• normal 使用浏览器默认的换行规则。
• break-all 容许在单词内换行。
• keep-all 只能在半角空格或连字符处换行。

word-wrap: break-word 和 word-break: break-all区别

1 p
2 {
3 width:11em; 
4 border:1px solid #000000;
5 word-wrap:break-word;
6 }

1 p
2 {
3 width:11em; 
4 border:1px solid #000000;
5 word-break:break-all;
6 }

能够经过比较看出：

word-break: break-all 正如其名，全部的都换行。一点空隙都不放过，比较紧凑。

word-wrap: break-word 若是一行文字有能够换行的点，如空格，折线或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，就不会断开英文单词或字符了，只会在这些换行点处换行，不会考虑紧凑，对齐和美观问题。