«

css怎么实现超出三行则只显示一行

时间:2024-3-3 11:13     作者:韩俊     分类: Html+Css


css实现超出三行则只显示一行的方法:1、打开相应的HTML文件;2、通过给文本标签设置css属性为“.text_singlerow {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}”实现单行显示即可。

本教程操作环境:Windows10系统、CSS3版、DELL G3电脑

css怎么实现超出三行则只显示一行?

CSS中多行文本时的行数控制显示

有时候要进行多行文本内容只显示一行,或两行,或三行,这时候需要在css中进行相关属性的设置,代码如下:

// 多行显示
.text_morerow {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 显示2行
    -webkit-box-orient: vertical;
    word-break: break-all; 
}

// 单行显示
.text_singlerow {
    display:block; /*这里设置inline-block或者block;根据使用情况来定(行内元素需要加这个,块级元素和行内块级可以不用)*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

需要注意的时,假设设置了只显示两行,则第二行结尾会以省略号显示,而第三...N行仍会显示,如果标签的高度够高的话,所以控制行数的显示,除了设置css样式外,还需要结合标签的高度设置。

 

标签: html css

热门推荐