首页 > 试题广场 >

多行元素的文本省略号

[问答题]
你知道多行元素的文本省略号吗？
查看答案及解析
添加回答
丢丢～头像 丢丢～
.txt-cut {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
发表于 2019-03-05 20:26:34 回复(0)
bbzt头像 bbzt
单行文本的溢出溢出省略号使用text-overflow：ellipsis
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行文本的溢出显示省略号
display：-webkit-box
-webkit-box-orient：vertical
webkit-line-clamp： 3
overfolow-hidden；


发表于 2019-03-07 20:44:43 回复(0)
April_Lie头像 April_Lie
写一下单行的：
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
发表于 2019-03-06 11:08:51 回复(0)
539862319头像 539862319 
over-flow:hidden; /*元素内容溢出的部分隐藏*/
text-overflow:eclipse /*文字溢出的部分用点表示*/

发表于 2019-07-17 14:53:32 回复(2)
爱割韭菜的C头像 爱割韭菜的C
使文字数量不同在相同的地方显示，给盒子加固定高度
overflow：hidden；
display：-webkit-box；将盒子转换为弹性盒子
-webkit-line-clamp：2；设置显示多少行
text-overflow：ellipsis；文本以省略号显示     
（word-break：break-all  文本在盒子末尾处换行（可以不加这一句））
-webkit-box-orient：vertical；文本显示方式，默认水平
发表于 2019-07-16 11:11:13 回复(0)
TiAmo_9955头像 TiAmo_9955
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
发表于 2019-04-30 15:13:05 回复(0)
小菜🐔头像 小菜🐔
单行:
overflow:hidden;
white-space:nowarp;
text-overflow:ellipsis;
多行:
display:-webkit-box;
overflow:hidden;
webkit-line-clamp:2;
webkit-box-orient:vertical;

编辑于 2019-03-15 14:48:57 回复(0)
Yz-陈头像 Yz-陈
设置属性 word-wrap :break-word text-indent:2em word-break:break-all display:-webkit-box
发表于 2019-03-01 10:45:32 回复(0)
提交观点

问题信息

前端工程师 HTML
上传者：小小
难度：
8条回答 2181浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号