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

前言：

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

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

两个功能需求

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

---

分析与实现

功能一：

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

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

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

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

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

.tag{
    word-beak:keep-all;
}

当然我们也能用浮动来实现，只是破坏了文档流。

功能二：

首先我们保证文字不换行，其次我们隐藏溢出的文字，再次我们在后面加上…
我们第一个想法就是JavaScript实现：

var string = "很长的文字";
string = string.substring(0,40)+"...";//需要测试出合适的长度
//正则也ok
string = /\.{39}/.exec(string)[0]+"..."

但最好的实现还是用css3解决

.text-handle{
    white-space:nowrap;//规定空白的处理方式，nowrap不换行
    over-flow:hidden;//超出父元素的处理办法，此处我们选择隐藏
    text-overflow:ellipsis;//省略号
}