css text overflow solution

1. Ordinary single line cut will be omitted

overflow:hidden; 文字长度超出限定宽度,则隐藏超出的内容)
text-overflow:ellipsis;(设置文字在一行显示,不能换行) white-space:no-wrap;(规定当文本溢出时,显示省略符号来代表被修剪的文本) 

The advantages of this method:

No compatibility problems
responsive truncated
text only display range overflow ellipsis, or do not display an ellipsis
ellipsis position display just
Cons:
only supports a single line of text truncation

2. Multi-row slit omitted

-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行) display: -webkit-box; -webkit-box-orient: vertica; overflow: hidden; text-overflow: ellipsis; 

This method is generally compatibility




Source link: https: //www.jianshu.com/p/5a0943faf7aa
 
Overflow plug:
  • clamp.js
  • jQuery.dotdotdot
 

Guess you like

Origin www.cnblogs.com/XingXiaoMeng/p/11817201.html