CSS:省略号

如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行;

描述:(1).单行文本溢出,显示省略号;第一步(不换行):white-space:nowrop;(对于连续的数字或者英文字母可省略)

                                                                    第二步(溢出隐藏)overflow:hidden;

                                                            第三步(文本溢出显示省略号)text-overflow:ellipsis;(省略号)

eg:

7ba67d1a43a0a2d5dc294386db8a3a45e96.jpg

结果:

d7960623159a8fc1acd22735ec77e97036d.jpg

(2)多行文本溢出,最后一行显示省略号;

  • a.对于内核是webkit的浏览器(Google/Safari),可以直接用CSS样式;((溢出隐藏)overflow:hidden;(省略号)text-overflow:ellipsis;display:-webkit-box;(弹性盒模型);();设置弹性盒子 的子元素的排列方式 :-webkit-box-orient:vertical; );设置显示文本的行数:-webkit-line-clamp:3;(最多显示3行)eg:
  • e7b3432d73b2ad88db090db7a5e7ff2217d.jpg
  • 结果:
  • 75b5827c9da6aeea5912c6e70d61d4bfb1f.jpg
  • b.兼容各种浏览器的方法
  • (1)利用伪类(IE6/IE7不支持)
  • eg:6ac1f3aa38f2f1e1d246097b019a25fc5fc.jpg
  • 结果:2f2d69da041998188779b1b8fd982fa548a.jpg
  • (2)利用定位和padding-right
  • ceb760a3810a283a52b9cbbcd95d06db6b7.jpg

结果:7a987e96b4185e4167a15ad8947d1f737e5.jpg

 

转载于:https://my.oschina.net/u/4045971/blog/3016980

CSS 中实现文本溢出显示省略号(`...`)的效果,可以根据文本是单行还是多行来分别处理。以下是具体实现方法: ### 单行文本溢出显示省略号 对于单行文本,可以通过以下 CSS 属性组合来实现溢出显示省略号的效果: ```css .single-line-ellipsis { white-space: nowrap; /* 禁止文本换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 溢出部分显示省略号 */ width: 200px; /* 设置容器宽度 */ } ``` 上述代码中,`white-space: nowrap;` 确保文本不会自动换行;`overflow: hidden;` 隐藏超出容器范围的内容;`text-overflow: ellipsis;` 则是在文本溢出时显示省略号[^2]。 ### 多行文本溢出显示省略号 对于多行文本,可以使用 `-webkit-line-clamp` 属性来限制显示的文本行数,并结合其他属性实现省略号效果: ```css .multiline-ellipsis { display: -webkit-box; /* 使用旧版弹性盒子模型 */ -webkit-box-orient: vertical; /* 设置子元素垂直排列 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 溢出部分显示省略号 */ width: 200px; /* 设置元素宽度 */ line-clamp: 3; /* 限制显示的行数 */ -webkit-line-clamp: 3; /* 兼容性设置 */ line-height: 20px; /* 设置行高 */ height: 60px; /* 根据行高和行数设置容器高度 */ } ``` 在此示例中,`display: -webkit-box;` 和 `-webkit-box-orient: vertical;` 用于将容器设置为垂直排列的弹性盒子;`line-clamp: 3;` 和 `-webkit-line-clamp: 3;` 限制了显示的行数;`overflow: hidden;` 和 `text-overflow: ellipsis;` 用于隐藏超出部分并显示省略号[^4]。 ### 注意事项 - `text-overflow: ellipsis;` 仅适用于块级元素(如 `div`),并且需要设置 `overflow: hidden;` 才能生效。 - 对于多行文本,`-webkit-line-clamp` 是非标准属性,虽然在大多数现代浏览器中支持良好,但在某些旧版本浏览器中可能不被支持。 - 如果希望文本在特定条件下自动换行,可以移除 `white-space: nowrap;` 并调整 `overflow` 和 `text-overflow` 属性以适应需求。 通过以上方法,可以在 CSS 中灵活实现单行或多行文本溢出时显示省略号的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值