标签内text文本多行显示,多余字符自动隐藏省略号显示

今天弄到一个显示电影详情的模块时,发现电影简介栏内如果字符过多,字就会溢出div容器,(真是难看!),然而我只知道关于单行内字符多余时按省略号显示的css样式,所以特意看了一下腾讯视频网页上的源代码,copy了一个技能

css样式代码:

word-break: break-all;/*属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)*/
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
overflow: hidden;  /** 隐藏超出的内容 **/

你可能感兴趣的:(web开发)