Css强制不换行以省略号(…)作为结尾

作者: Mr yang 分类: web前端笔记 发布时间: 2017-01-10 23:27 围观:44

网站中经常遇到的css小样式吧,效果图和代码如下:
效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    ul{
        width: 600px;
        height: 150px;
        margin:20px auto;
        border: 1px solid red;
        list-style: none;

    }
    li{
        width: 500px;
        height: 30px;
        margin:0 auto;
        margin-top:15px;
        line-height: 30px;
        padding: 0 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

</style>
<body>
<ul>
    <li class="a">新华社北京1月10日电 中共中央政治局常务委员会1月10日全天召开会议,听取全国人大常委</li>
    <li class="b">国务院、全国政协、最高人民法院、最高人民检察院党组工作汇报听取中央书记处工作报</li>
    <li class="a">会议强调,办好中国的事情,关键在党。中国特色社会主义最本质的特征是中国共产党领</li>
</ul>
<!--主要“text-overflow: ellipsis;”“ white-space: nowrap;”“overflow: hidden;”这三行
缺一不可,另外text-overflow还有一个clip,效果是没有省略号。-->

</body>
</html>

 

版权声明:署名-非商业性使用-禁止演绎 3.0 中国大陆 (CC BY-NC-ND 3.0 CN)
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作

发表评论

电子邮件地址不会被公开。 必填项已用*标注