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

happyxp

1、文字超出一行省略，超出部分显示…

$ N  C0 _2 e' q5 O* D用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   5 H" w- |& ?, ]
2. text-overflow:ellipsis;
   
3. white-space: nowrap;

复制代码

( O' V" w# }0 Q' i
# g* ?/ b" G% F- ?5 d( a; i* J2 @
2、多行文本溢出显示省略号…

2 `2 S" V  n2 }' k; z/ F- r
& U& R+ r" b, \$ N) `

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

复制代码

  ~) ^/ B/ p* i+ w注意：
- [. s2 _0 @) |* Y$ W-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
, G4 ^6 m' H- ~6 t( ldisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

4 f2 s0 @# B0 p% a9 _2 z9 E2 S  e' n
9 k7 G( l/ G! z

" V& h. J3 u' ~$ [! @( }