【CSS】省略号

2019年5月13日 130次阅读 来源: Rabbit_svip

《【CSS】省略号》 微信订阅号：rabbit_svip

《【CSS】省略号》 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】百度百科状态栏

    原文作者：Rabbit_svip
    原文地址: https://www.jianshu.com/p/1d87173ff341
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞