微信訂閱號：rabbit_svip

image.png

有時候一個網站會有很多欄目，比如新聞之類的欄目。欄目底下會有很多標題。在處理標題字過多的情況，有人會在后臺限制字數，有人會用js做判斷。

其實最簡單的方法就是用CSS控制。

HTML代碼

<!-- 省略號表示很多字 -->
<div>
    <ul>
    <li><a href="#">新聞...新聞</a></li>
    <li><a href="#">新聞...新聞</a></li>
    <li><a href="#">新聞...新聞</a></li>
    <li><a href="#">新聞...新聞</a></li>
    <li><a href="#">新聞...新聞</a></li>
    </ul>
</div>

CSS代碼

div {
    width: 250px;
    border: 1px solid #000;
    padding: 10px 0;
}
li {
    width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    list-style-type: none;
    margin: 5px auto;
    padding: 0 5%;
}

主要注意 li 里面的樣式。規定 width，然后用 overflow: hidden 把超出寬度限制的部分因殘起來。再通過 text-overflow: ellipsis 設置省略號。

HTML與CSS 目錄：HTML與CSS

上一篇：【CSS】圓角（border-radius）

下一篇：【CSS】百度百科狀態欄