css怎么实现超出两行显示省略-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

css怎么实现超出两行显示省略

Apr 02, 2021 pm 02:45 PM

css

css实现超出两行显示省略的方法：首先创建一个HTML示例文件；然后在body中定义好文字内容；最后在style中通过设置属性“-webkit-line-clamp: 2;overflow: hidden;”来实现超出省略效果。

css怎么实现超出两行显示省略

本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑

CSS实现文本超过部分，超出两行，超出部分省略号显示

文字超过部分显示为省略号

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

Salin selepas log masuk

文本超出两行，超出部分省略号显示

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

Salin selepas log masuk

推荐学习：《css视频教程》

Atas ialah kandungan terperinci css怎么实现超出两行显示省略. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn