在我们设置样式的时候，不可避免的涉及到内容只出现一行或只出现自己想要的行数。
1.首先说一行的问题。
<div class="outer">
如果内容超出，还会看到现在的内容吗？哒哒哒哒哒
</div>
.outer {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
详解：overflow:hidden;这个就不用多说了，超出的部分隐藏。还可以用于清除浮动(不建议使用)。
text-overflow:ellipsis;超出的部分用...来显示
white-space:nowrap;这个东东曾经让我很迷糊。对此我专门进行了一番修炼。
white-space
首先先看一下菜鸟教程里面的讲解
大家可能会迷糊，什么是空白？？空白也就是我们在编译器里面打出的空格，或者缩进，总之就是没有内容的部分。
我们一个个举栗子！
以下面的文本结构作为例子
white-space:normal;显示的就是默认样式
white-space: pre;这个不仅不换行，还会把空白的部分显示在页面中。头很铁！
white-space:nowrap;不会换行，但是没有空白部分。
剩下的就不一一实验了。大家可以试一下看看效果。
一行显示的结果将会是这样的。
2.如果想要显示两行怎么办？
还是用上面的文本内容
.outer {
overflow: hidden;
text-overflow: ellipsis;
/*设置成弹性盒子 */
display: -webkit-box;
/*显示的个数 */
-webkit-line-clamp: 2;
/* 属性规定框的子元素应该被水平或垂直排列。 */
-webkit-box-orient: vertical;
}
