我们可以看到在许多网站上会出现图1这样的情况，实际内容要比标题长很多，但是只出现了一行文本，点开之后我们都会发现并不止这些文本，这里用到了css3中的一个小技术。这个技术就是接下来我们要了解的。
1
1.首先我们要先学习一下需要用到的一些css属性
属性名 | 属性功能 | 用法 |
text-overflow | 规定当文本溢出包含元素时发生的事情 |
这里修剪文本指的是处理溢出部分的文本 text-overflow:clip 修剪文本 text-overflow:ellipsis 若是溢出则显示省略符 text-overflow:string 用给定的字符串代替被修剪的文本 |
white-space | 设置如何处理元素内的空白 | white-space;nowrap 文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止 |
overflow | 规定当内容溢出元素框时发生的事情 |
overflow:visible 默认值，不修剪，内容呈现在元素框之外 overflow:hidden 内容会被修剪，并且不可见 overflow:auto 如果内容被修剪，浏览器会显示滚动条方便查看 |
2.我们了解一下这个小技术在各大网站的用途
(1).打开百度，右击后，打开检查
(2).我们将取消overflow、white-space、text-overflow这三个属性，保存网页后打开会有什么变化
(3).当我们取消这三个属性以后，我们就会发现，现在的文本会比之前的要长一些。
这就是因为overflowtext-overflow white-space的组合形成的效果
3.实现这个小技术
(1).首先我们先创建html文件
这里只给出body内部的代码，先创建一个p标签设置这个标签的class，用来关联样式
<pclass="cp">上海大学生资助诚信教育指数发布</p>
(2).创建css文件
我们将利用这三个属性对段落进行修剪
首先设置html内的标签的内外边距
*{
margin: 0;
padding: 0;
}
最重要的修剪段落
这里要注意一点，段落的宽度决定了这段文本是否换行，若是段落宽度太小，就会自动换行，我们要实现的是溢出部分显示省略符而不换行
我们先设置一下元素的长度和高度
这里还要注意 white-space 、 overflow 、 text-overflow 的具体用法
要是不设置white-space为nowral，那么就不会溢出，因为多出的文本部分会实现自动换行。如果设置的话，多出的部分会溢出设置的宽度。
接下来我们要设置overflow和text-overflow
overflow处理的是溢出部分情况
text-overflow处理的是若是有溢出情况的发生，用什么来替代
我们在下面设置为溢出部分隐藏，且用省略号来表示有溢出部分
.cp{
width: 200px;
line-height: 20px;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
最终效果:
