新闻列表中，常用的文字超出后显示省略号...

新闻列表中，常用的文字超出后显示省略号..



<head>

<title>文本超出后显示省略号...</title>
<style type="text/css">
    ul li {
        list-style-type: none;
    }

    a {
        color: #000000;
        text-decoration: none;
    }

    a:hover {
        color: #999999;
    }

    li {
        width: 200px;
        white-space: nowrap;
        /*强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。 */
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        -moz-text-overflow: ellipsis;
        overflow: hidden;
    }

    /* firefox only wtf is? pls let me know*/
    li:not(li) {
        clear: both;
    }

    li:not(li) a {
        max-width: 175px;
        float: left;
    }

    li:not(li):after {
        content: "...";
        float: left;
        width: 25px;
        padding-left: 5px;
        color: #df3a0e;
    }
</style>


</head>
<body>
    <div class="nwes">
        <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>
            <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>
</body>

原文

posted @ 2019-02-01 15:12  Gitwow  阅读(478)  评论(0)  编辑  收藏  举报