换行+省略号

只是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吧。

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

换行问题
screenshot.png
图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使用,有不一样的效果:

screenshot.png

posted @ 2016-12-02 17:24  石沉溪涧  阅读(176)  评论(0编辑  收藏  举报