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