首頁 >web前端 >css教學 >css怎麼實現超出兩行顯示省略

css怎麼實現超出兩行顯示省略

藏色散人原創: 2021-04-02 14:45:4452448瀏覽

css實作超出兩行顯示省略的方法：先建立一個HTML範例檔；然後在body中定義好文字內容；最後在style中透過設定屬性「-webkit-line-clamp: 2;overflow : hidden;」來實現超出省略效果。

css怎麼實現超出兩行顯示省略

本文操作環境：Windows7系統、HTML5&&CSS3版，DELL G3電腦

CSS實作文字超過部分，超出兩行，超出部分省略號顯示

文字超過部分顯示為省略號

<style>
.p{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
<body>
    <p class="p">
        我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
    </p>
</body>

文字超出兩行，超出部分省略號顯示

<style>
.p{
    width: 200px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
}
</style>
<body>
    <p class="p">
        我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
    </p>
</body>

推薦學習：《css影片教學》

以上是css怎麼實現超出兩行顯示省略的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：純CSS如何實現圖片輪播下一篇：純CSS如何實現圖片輪播

看更多