一、前言
當我們在固定的范圍內顯示內容時，我們是希望能夠完整顯示的，然而往往事與願違，文本會超出我們給定的范圍，這時候怎么辦呢？
二、超出范圍，對文本進行省略號隱藏
先上圖
代碼很簡單
div{ width: 100px; overflow: hidden; /*對超出容器的部分強制截取，高度不確定則換行*/ text-overflow: ellipsis; /*顯示省略符號來代表被修剪的文本。*/ white-space: nowrap; /*禁止換行*/
}
三、我們還想顯示省略掉的，怎么辦呢
/*方法一：鼠標移上去時直接釋放寬度限制 *弊端是釋放寬度豈不是會影響其他元素布局 */ div:hover{ width: auto;
}
/*方法二：鼠標移上去時釋放overflowd的截取，按照原本樣式顯示，即換行 *弊端是換行還是會改變布局，但稍微比上面不換行直接顯示好一點 */ div:hover{ text-overflow:inherit; overflow: visible; white-space: pre-line; /*合並空白符序列，但是保留換行符。*/
}
/*方法三：鼠標移上去時會顯示title標簽中的文字內容 *弊端是有點丑，顯示速度有點慢，位置也不大好 */
<div title="超出文字省略顯示">超出文字省略顯示</div>
方法四：那就是自定義彈出層嘍，有點麻煩，好處是自己想怎么顯示就怎么顯示，想顯示什么內容就顯示什么內容，畢竟自定義嘛。。。