css设置使文字显示2行多余的为省略号。。。

 .title{
        font-size: .7rem;
        line-height: 1.5rem;

        overflow: hidden;  /** 隐藏超出的内容 **/
        word-break: break-all;
        text-overflow: ellipsis; /** 多行 **/
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2; /** 显示的行数 **/
        margin-bottom: .3rem;
    }

  

原文地址:https://www.cnblogs.com/yzssoft/p/10012911.html

时间: 2024-10-08 02:10:55

css设置使文字显示2行多余的为省略号。。。的相关文章

css设置文本最多显示两行,多余部分为省略号

首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性,需要记得. 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为弹性伸缩盒子模型显示. -webkit-box-orient:vertical; //从

QT按钮背景颜色设置及文字显示位置设置

QPushButton * pQBtn = new QPushButton( cBuff, this ); pQBtn->setStyleSheet("text-align: left;");//设置按钮文字显示位置-左对齐 pQBtn->setStyleSheet("background-color: rgb(255, 128, 64);");//设置按钮背景颜色 pQBtn->setStyleSheet("border-image:

CSS实现div内文字显示两行,超出两行部分省略号显示

在搭建前台文章列表中,需要实现div内文字显示两行,超出的则省略号显示. 找了很多,都貌似只能一行显示.最后在百度知道找到答案. 答案转自百度知道,题主的自答. 用的是-webkit-私有属性.text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; 另有回

css让文字显示特定行数,多余的显示省略号

/*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ -webkit-line-clamp: 2; /** 显示的行数 **/ overflow: hidden; /** 隐藏超出的内容 **/ } 1,

-webkit-line-clamp 实现限制文字显示多少行,多余的用...

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 限制在一个块元素显示的文本的行数. 为了实现该效果,它需要组合其他外来的WebKit属性.常见结合属性: display: -webkit-box; ,将对象作为弹性伸缩盒子模型显示 . -webkit-box-orient  ,设置或检索伸缩盒对象的子元素的排列方式 . text-overflow,可以用来多行文本的情况下,用省略号“...”

-webkit-line-clamp 实现限制文字显示多行,多余的用...

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 限制在一个块元素显示的文本的行数. 为了实现该效果,它需要组合其他外来的WebKit属性.常见结合属性: display: -webkit-box; ,将对象作为弹性伸缩盒子模型显示 . -webkit-box-orient  ,设置或检索伸缩盒对象的子元素的排列方式 . text-overflow,可以用来多行文本的情况下,用省略号“...”

CSS div内文字显示两行,超出部分省略号显示

1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKit内核的css前缀为“-webkit-”,Comodo Drangon(科摩多龙),苹果,安卓,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速版,SRWare Iron,猎豹浏览器,RockMelt,QQ浏览器都可识别. 备注:IOS版的微信.android版本

css设置字体单行,多行超出省略号显示

单行: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 原文地址:https://www.cnblogs.com/Tohold/p/9065968.html

css使文字显示两行后显示省略号

本人喜欢把一些实用的东东拿过来,写成文章或者收藏起来.于是乎... 直接上代码: .article { color: #000000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } 狠狠的点击,查看效果吧 原文地址:https://www.cnblogs.com/homehtml/p/12625871.htm