css3 文字两行

CSS3 中的文字两行可以为网页设计师提供更多渲染文字的方式，是最新的 CSS 技术之一。

/* 设置文字两行 */.two-line-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
    

在上述代码中，我们设置了一个名为“two-line-text”的 class，使用了以下属性：

• display: -webkit-box; 表示将元素设置为flexbox。
• -webkit-line-clamp: 2; 表示限制显示两行文字，适用于单行垂直排列的情况。
• -webkit-box-orient: vertical; 表示垂直排列 flex items。
• overflow: hidden; 表示超出部分隐藏。
• text-overflow: ellipsis; 表示超出部分显示省略号。

在应用上述样式后，只需将要显示两行文本的元素添加“two-line-text”class 即可实现两行文字的渲染。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！