搜索
查看: 5242|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…  t5 C) n# a$ x
! z( j& K9 s# d# Z
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
* B& C, N2 D8 K8 G. d/ _: U
  1. overflow: hidden;
    , M0 l. J/ u7 ^$ P" {
  2. text-overflow:ellipsis;  y! @  ]4 M( m4 N
  3. white-space: nowrap;
复制代码
7 t# l/ A, }& n- c; x# s

$ M- C/ O8 [9 [. r- U# Y: v
  V: Q, G: Y) Z( P; w
2、多行文本溢出显示省略号…
* F3 O  |6 x- p1 m3 w- v

  Z# B4 i' w, n- A$ Y/ e4 j* T3 @0 ~  l6 p
  1. display: -webkit-box;1 x  l* Z: |$ r( @/ E
  2. -webkit-box-orient: vertical;
    4 m- u  J+ B+ C2 E
  3. -webkit-line-clamp: 3;
    2 C! D: ]0 k& l) F1 J# [
  4. overflow: hidden;
复制代码
, y6 s( m5 p% W) Z2 f$ R
注意:
$ [5 h. J& b" V+ s-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  z' @4 H- h, x+ |  Wdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
1 T8 k/ K, k- Z0 O: e/ m-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式5 C+ v# d3 L4 v- P. F

3 g7 D0 j1 n" v. X2 k3 m; g; P
- {0 I$ ^, Z' ~0 C" W+ w
( D0 T1 P$ r$ R: J0 p
( x9 j: x) R7 {
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

热议作品
精华帖子排行
精彩推荐

虾皮社区,成立十年了!

站长自己也搞不懂想做个什么,反正就是一直在努力的做!

Copyright © 2007-2019 xp6.org Powered by Discuz

QQ|Archiver|手机版|小黑屋|虾皮社区 鲁公网安备 37021102000261号 |网站地图
返回顶部 返回列表