换行+省略号

只是Mark一下，不是正规文章。

换行问题

word-break: 规定自动换行的处理方法

word-break	break-all	keep-all	normal
	允许单词内换行	只能在半角空格或连字符处换行。	浏览器默认

word-wrap: 允许长单词换行到下一行 word-wrap: break-word;

word-wrap	break-word	normal
含义	在长单词或 URL 地址内部进行换行。	只在允许的断字点换行（浏览器保持默认处理）。

Chrome, Safari以及其他WebKit/Blink浏览器还支持费非官方标准的break-word值，其表现就和word-wrap: break-word一样。

css3中换成了overflow-wrap，但支持的浏览器很少。所以还是乖乖用word-wrap吧。

以上解释太晦涩。。不如看图：

换行问题

图2改成word-break: break-all;

空格问题

white-space(是否允许空格换行): 如何处理元素内的空白。// todo 暂时只了解nowrap好了

white-space	normal	pre	nowrap	pre-wrap	pre-line	inherit
			不允许空格处换行

white-space: nowrap;text-overflow:ellipsis; overflow: hidden;

实现展示不完的文字使用省略号。

word-break:keep-all; 结合text-overflow使用，有不一样的效果：

转载于:https://www.cnblogs.com/Mrs-cc/p/6126529.html