css怎麼實現超出兩行顯示省略-css教學-PHP中文網

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

藏色散人

發布： 2023-01-04 09:34:19

原創

52390 人瀏覽過

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中文網其他相關文章！