多出文字显示点点点-webkit-line-clamp

最新推荐文章于 2023-11-23 14:58:31 发布

大拿加拿大

最新推荐文章于 2023-11-23 14:58:31 发布

阅读量324

点赞数

本文链接：https://blog.csdn.net/zgrbsbf/article/details/103362845

版权

以前以为文字多了显示点点点只能用WTO，但是WTO处理多行不方便，今天学到一个新的：

-webkit-line-clamp

     <style>
        p {
            width: 300px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
    </style>

    <p>
          In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is
        clamped after three lines.
          An ellipsis will be shown at the point where the text is clamped.
    </p>

其中，display必须设置成 -webkit-box or -webkit-inline-box，-webkit-box-orient必须设置成vertical,大多数的时候overflow可以设置成hidden

兼容性：火狐也支持，桌面 or 安卓 or iOS 都可以使用