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

样例：

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

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

white-space: nowrap;
overflow: hidden;
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区别

p
{
width:11em; 
border:1px solid #000000;
word-wrap:break-word;
}

p
{
width:11em; 
border:1px solid #000000;
word-break:break-all;
}

可以通过比较看出：

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

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