HTML 应用文字省略号的表示

最新推荐文章于 2023-10-18 15:20:25 发布

weixin_33887443

最新推荐文章于 2023-10-18 15:20:25 发布

阅读量305

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/honchy/blog/358245

版权

为什么80%的码农都做不了架构师？>>>

单行文本的省略号显示，多行文本的省略号显示

文本显示省略好，应该是文本一行不足以显示的时候，所以这里需要设置，容器的宽度并且文本不能够折行。简单的示例如下。

<!DocType html>
<html>
    <head>
        <meta charset="UTF-8" />
        <style type="text/css">
            ul{
                margin:0px;
                padding:0px;
                list-style:none;
                width:60px;
            }
            ul li{
                text-overflow:ellipsis;
                white-space:nowrap;
                overflow:hidden; 
            }
        </style>
    </head>
    <body>
        <ul>
            <li>是一个很长的文本可以吧</li>
        </ul>
    </body>
</html>

显示效果不贴了。自己看吧。

这个是简单的情况，显示省略好关键点是让容器拥有一个固定的宽度。所以在应用上主要的思路是把文字的容器宽度能够固定。固定宽度的方式有：固定px方式，百分比方式，使用absolute布局，固定left 和right方式，table td的自动伸展，flex容器的自动分配。

这里举个absolute布局的例子；

<!DocType html>
<html>
    <head>
        <meta charset="UTF-8" />
        <style type="text/css">
            html ,body{
                background-color:#f6f6f6;
            }
            .ellipsis {
                text-overflow:ellipsis;
                white-space:nowrap;
                overflow:hidden; 
            }
            ul{
                margin:0px;
                padding:0px;
                list-style:none;
                width:320px;
            }
            ul li{
                background-color:#fff;
                padding:5px 10px;
            
                margin-bottom:10px;
                border-top:1px solid #f3f3f3;
                border-bottom:1px solid #ccc;
                
                box-shadow : 0px 1px 1px #dfdfdf;
                
                position:relative;
            }
            li img{
                margn:0px;
                padding:0px;
                border:none;
                width:80px;
                vertical-align:middle;
            }
            li .name{
                display:inline-block;
                position:absolute;
                left:90px;
                right:90px;
            }
            li .price{
                display:inline-block;
                color:#c00;
                position:absolute;
                text-align:right;
                width:80px;
                right:10px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <img src="http://g.search.alicdn.com/img/bao/uploaded/i4/i2/TB1EeNaGXXXXXayXFXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg" />
                <span class="name ellipsis">HTML5 CSS3 JavaScript 网页设计</span>
                <span class="price">￥13.80</span>
            </li>
            <li>
                <img src="http://g.search.alicdn.com/img/bao/uploaded/i4/i2/TB1EeNaGXXXXXayXFXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg" />
                <span class="name ellipsis">HTML5 CSS3 JavaScript 网页设计</span>
                <span class="price">￥13.80</span>
            </li>
        </ul>
    </body>
</html>

效果图如下：