css文本换行与长文字单行省略处理

前言：

css很强大。
无论是早期的div+span布局，还是现在css3的各种新特性：选择器如first-child，nth-child,not等一些需要借助js才能实现的效果，一行css3代码搞定。更不用说滤镜、渐变等。
css3也加强了文本处理能力。今天结合两个小需求来谈谈css的文本处理

文本属性指决定文本特性的属性:文本对齐方式、文本的行高、文本的从左到右还是从右到左、字体大小等等。而且这些特性可以被继承。

两个功能需求

• 一行有很多标签，每个标签由一个元素+内容组成。要求标签数量多时，标签整体换行，一个标签不能放到两行。
• 要求一个长句一行显示，不溢出（在父元素内），多余的隐藏并以…结尾

---

分析与实现

功能一：

如果一个元素内容过长，会自动换行，这是css语言的默认处理方式。

这种处理对中文是没问题的，因为汉语的基本单位是一个个的汉字，就算一个词语被分在两行也不会影响正常的阅读。

但英文就不行，单词才是英文的基本单位，一个字母是没有意义的，因此如果将单词分成了两行显然会影响阅读。

因此，css不对英文长单词、长数字、url等作换行处理，这样英文长句就会溢出包裹块。

当然css也提供了自定义的方案：word-wrap规定是否允许单词换到两行，word-break