样例：
1 <p style=" 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 11em; 4 border:1px solid #000000; 5 word-wrap:break-word; 6 }
1 p 2 { 3 11em; 4 border:1px solid #000000; 5 word-break:break-all; 6 }
可以通过比较看出：
word-break: break-all 正如其名，所有的都换行。一点空隙都不放过，比较紧凑。
word-wrap: break-word 如果一行文字有可以换行的点，如空格，折线或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，就不会断开英文单词或字符了，只会在这些换行点处换行，不会考虑紧凑，对齐和美观问题。