在我們設置樣式的時候，不可避免的涉及到內容只出現一行或只出現自己想要的行數。
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;
}
