css3 设置多行文本显示省略号

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

时间： 2024-11-05 00:41:54

css3 设置多行文本显示省略号的相关文章

HTML5[6]：多行文本显示省略号

CSS3新增text-overflow: ellipse; 只支持单行文本 如果是多行文本, 在无法完全显示的情况下,可以按下面这样写: overflow:hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

单行文本、多行文本显示省略号...

一.单行文本 .box { width: 200px;   overflow: hidden;   text-overflow:ellipsis;   white-space: nowrap;   } 二.多行文本 1. csss实现,适用于webkit内核浏览器.移动端.微信可以,火狐不可以 .box {  width: 200px;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; over

多行文本显示省略号

overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

css设置文字不换行并显示省略号

1.单行文本显示省略号 width:value(具体的值):设置容器具体的宽度 white-spacing:nowrap:强制文本在一行内显示 overflow:hidden:溢出内容为隐藏 text-overflow:ellipsis:溢出文本显示省略号 2.多行文本显示省略号 display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden: text-overflow:ellipsis: -webkit-line-clamp

页面多行文本最后显示省略号

单行文本超出显示省略号比较简单,多行文本显示省略号可能一些同学不是很清楚,贴代码: -webkit-line-clamp:n;一般是你需要几行文本的行数,而-webkit-box-orient是文本方向.

网页之文本溢出显示省略号

1.单行文本溢出显示省略号的css写法 1 overflow:hidden; 2 text-overflow:ellipsis; 3 white-space:nowrap;/*不换行*/ 2.多行文本显示省略号 这里根据应用场景来实现 1)Webkit浏览器或移动端页面 可以使用webkit的私有属性:-webkit-line-clamp(这个属性不属于css规范),该属性用来显示块元素显示的文本行数.要实现该效果,需要组合其他的Webkit属性. 常见结合的属性: display: -webk

css(3)显示省略号

需设置宽度才能溢出显示省略号. 单行文本: .am-text-truncate { word-wrap: normal; /* for IE */ text-overflow: ellipsis; //当文本溢出显示省略符号来代表被修剪的文本. white-space: nowrap; //规定段落中的文本不进行换行 overflow: hidden; } word-wrap: normal / break-word; normal 只在允许的断字点换行(浏览器保持默认处理). break-wo

多行文本溢出显示省略号(…)全攻略

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…).当然部分浏览器还需要加宽度width属性. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果. WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用W

单/多行文本溢出显示省略号+清除浮动

1.文本溢出显示省略号 (1)单行文本溢出,只需要给文本所在的容器设置如下样式: width:100px;/*容器一定要设置固定宽度*/ white-space:nowrap;/*强制一行内显示*/ overflow:hidden;/*溢出隐藏*/ text-overflow:ellipsis; /*显示省略号*/ 注意:即使给上面文本所在的容器设置了足够高的高度,也会强制变成单行内显示. (2)多行文本溢出,通过本人亲自试验,总结了以下几种方法: ①只适用于Webkit内核的浏览器,给文本所在