css设置当字数超过限制后以省略号显示...

happyxp

1、文字超出一行省略，超出部分显示…
2 |9 M/ M0 y$ l& b4 s, I# D
用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
6 Y+ g4 t8 f- Y& h

1. overflow: hidden;
   
2. text-overflow:ellipsis;
   
3. white-space: nowrap;

复制代码

; m$ @# k  [: h/ H4 y. y' D2、多行文本溢出显示省略号…
! H$ }, d$ Z& A9 b- ]* |5 k: m

! i' l6 K2 z2 `

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   
4. overflow: hidden;

复制代码

  Y. \. J* U+ }+ g注意：
* ?* b# W8 Q# b$ T1 G+ w9 R7 s0 G. `( D-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
! z1 ^5 w& H1 D1 E) |7 r) A-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

7 K# m/ ~% p' E0 U5 L' z/ e  T& {
" {: N% X- m" R

$ g7 d3 Z  j9 D: n' N" y& F7 f  g) g$ @