css多行文本省略號（...）

時間 2019-12-07

標籤 css 行文省略號欄目 CSS 简体版

原文原文鏈接

若是實現單行文本的溢出顯示省略號同窗們應該都知道用text-overflow:ellipsis屬性來，固然還須要加寬度width屬來兼容部分瀏覽。html

實現單行文本省略web

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin:0 auto ;
                width:300px;
                color: red;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        </style>
    </head>

    <body>
        <div>單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略</div>
    </body>

</html>

結果spa

實現多行文本省略3d

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin: 0 auto;
                width: 300px;
                color: red;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div>
    </body>

</html>

結果code

注意：CSS3屬性記得添加前綴，如htm

 -webkit-box-orient

相關標籤/搜索