nsjd.net
当前位置:首页 >> Css 两行超出省略号 >>

Css 两行超出省略号

单纯的css只能实现一行显示不下的时候显示省略号,如果是多行的话,就需要用js实现了。

通常的做法是这样的: 1.overflow:hidden; 2.text-overflow:ellipsis; 3.-o-text-overflow:ellipsis; 4.white-space:nowrap; 5.width:100%; 其中,overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;-o-text-overflow: ellip...

一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflo...

试试这样行不 display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;

如果想要在一行里实现“超出长度显示省略号”,是可以的。 overflow: hidden;white-space: nowrap;text-overflow:ellipsis;这几句css就可以,不要加上去的容器一定要写了宽度的 注意:这里实现的是“超出长度”,而不是“超出字数”,并且在一行里实现...

首先设置这个包裹文字元素的标签为块状元素,之后在确定宽度,之后加上 overflow:hidden; text-overflow:ellipsis; white-space:nowrap;

如果是单面自己写的页面,加直接输入五行后用省略号。 如果是调用数据库并有网站程序,可以网站程序的标签上设置调用字节数。 标签后用省略号。

样式:{width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}说明:white-space: nowrap 保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格。overflow: hidden 隐藏超出单元格的部分。text-overflow:...

.pTwoLine{ white-space:initial; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 关键词-webkit-line-clamp: 2;最多显示2行, text-overflow: ellipsis;超过2行...

不需要用css3,直接定义他的最大高度max-height即可,算好行高如果是20那就三排是20*3=60px; 文字超出后省略号是text-overflow:ellipsis; .t{width:100px;line-height:20px;max-height:60px;overflow:hidden;text-overflow:ellipsis;} 测试测试...

网站首页 | 网站地图
All rights reserved Powered by www.nsjd.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com