HTML 应用文字省略号的表示

时间 2019-11-17

标签 html 应用文字省略号表示栏目 HTML 繁體版

原文原文链接

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

文本显示省略好，应该是文本一行不足以显示的时候，因此这里须要设置，容器的宽度而且文本不可以折行。简单的示例以下。html

<!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容器的自动分配。flex

这里举个absolute布局的例子；spa

<!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>

效果图以下：.net

多行文本显示的状况，你们移动脚步，看看这里吧，很详细的 http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html 设计

另外一种风骚解法： http://blog.csdn.net/crx05/article/details/5876531 code

HTML 应用 文字省略号的表示

HTML 应用文字省略号的表示