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

happyxp

1、文字超出一行省略，超出部分显示…
/ l' q8 n- ~7 L# e
& g# U# f* X0 r% k8 y) T用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
6 [2 L: U% b+ \5 ^

1. overflow: hidden;
   # r5 R; {* O7 k2 U: R% n4 W
2. text-overflow:ellipsis;
   4 v/ d# s& e2 |
3. white-space: nowrap;

复制代码

. n9 C; [: N# M

; G+ f; u$ ~$ J) a' ~2、多行文本溢出显示省略号…
" g$ ^/ u  y* ^& \5 h, V* v
1 t, ]( \) V* E$ S2 X) y
( A# k6 l& \2 g# `" F

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   ) [! S. ?* Y9 k
3. -webkit-line-clamp: 3;
   4 u" L- u' L! K; R; J, D2 ?
4. overflow: hidden;

复制代码

注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
* q0 c/ G/ Y3 }% Z* O-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

+ V/ [3 ]7 C7 r# c/ z# P
! g/ ?. |9 T! l( B