超出文本省略號顯示

超出文本省略號顯示

white-space:nowrap;  /*強制不換行*/
overflow:hidden; /*當對象內文本溢出時隱藏*/
text-overflow:ellipsis;  /*當對象內文本溢出時顯示省略標記*/

通常使用這三行便可。例如：

<div>
    <p>When you are old and grey and full of sleep</p>
</div>

<style>
            div{
                width: 200px;
                border: 1px solid black;
            }
            p{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
}
</style>

效果以下：

但是當我把p標籤中的這段文字做爲連接修改標籤爲a的時候，出現了問題：

<div>
    <a href="#" alt="link">When you are old and grey and full of sleep</a>
</div>

<style>
            div{
                width: 200px;
                border: 1px solid black;
            }
            a{
                text-decoration: none;
                color: black;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
</style>

結果效果以下：

仍是在一行顯示，說明 white-space: nowrap;是有做用的，那麼就是後面兩句出了問題。由於a標籤爲內聯元素，不能設置寬高，其寬即爲文本的寬度，overflow：hidden；這個屬性定義溢出元素內容區的內容會隱藏，a標籤的內容並無溢出，則overflow就不起做用了。而要實現超出文本隱藏則須要設置a標籤的 display: inline-block;或者display: block;

a{
                display: inline-block;/*display: block;*/
                text-decoration: none;
                color: black;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }