关于文本溢出的相关属性:
1. text-overflow: clip|ellipsis|string; 该属性规定当文本溢出包含元素时发生的事情。
clip : 修剪文本。
ellipsis : 显示省略符号来代表被修剪的文本。
string : 使用给定的字符串来代表被修剪的文本。
2. white-space 属性设置如何处理元素内的空白。
可能的值及含义：
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
这里用上面两个属性实现单行文本溢出：
<p>该属性规定当文本溢出包含元素时发生的事情。</p>
p {
white-space:nowrap; /* 规定段落中的文本不进行换行：*/
width: 5rem; /* 规定容器的宽度，文本内容长度一定要小于容器宽度 */
overflow: hidden; /*隐藏超出部分*/
text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本。*/
}
(单行文本溢出效果图 🙂
上面实现了单行文本溢出显示省略号，比较简单，那如果要实现多行文本溢出的话则涉及到更多的属性：
3. box-orient 属性规定框的子元素应该被水平或垂直排列。
浏览器支持：
目前没有浏览器支持 box-orient 属性。
Firefox 支持替代的 -moz-box-orient 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。
可能的取值：
| horizontal | 在水平行中从左向右排列子元素。 |
| vertical | 从上向下垂直排列子元素。 |
| inline-axis | 沿着行内轴来排列子元素（映射为 horizontal）。 |
| block-axis | 沿着块轴来排列子元素（映射为 vertical）。 |
| inherit | 应该从父元素继承 box-orient 属性的值。 |
4. -webkit-line-clamp 是一个不规范的属性，因为它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display：-webkit-box；必须结合的属性，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient：必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow：可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
这里用上面的属性实现多行文本溢出：
<p>
这里是显示书目内容简介,H+IDE是一个能够大大提升Html页面开发速度的一个模板资源整合开发工具,提升工作效率,值得推广使用!
</p>
p {
font-size: 0.6rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:; //控制显示的文本的行数
overflow: hidden;
}
(多行文本溢出效果图)
5. 设置了文本溢出显示省略号后，往往需要判断当前文本是否溢出，从而做相应的操作：
$("p").mouseover(function() {
// 单行的判断width 或者 多行的判断 height
if (this.offsetWidth < this.scrollWidth) {
console.log("溢出了");
}else{
console.log("没有溢出");
}
});
经测试，该判断文本是否溢出的代码在IE8下可以正常运行！！！ : )
