【CSS】省略号

微信订阅号：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】百度百科状态栏