一、前言

　　當我們在固定的範圍內顯示內容時，我們是希望能夠完整顯示的，然而往往事與願違，文本會超出我們給定的範圍，這時候怎麽辦呢？

二、超出範圍，對文本進行省略號隱藏

　　先上圖

　　代碼很簡單

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>

方法四：那就是自定義彈出層嘍，有點麻煩，好處是自己想怎麽顯示就怎麽顯示，想顯示什麽內容就顯示什麽內容，畢竟自定義嘛。。。

超出div寬度範圍的文字進行省略號省略，在鼠標移上去以後顯示完整的內容