TypechoJoeTheme

尘遇 logo

当我遇上你
排行榜
统计

css 文本超出就隐藏并且显示省略号

醉书生站长
7个月前
0 评论
175 阅读
检测收录...
03/02
本文最后更新于2021年03月12日,已超过218天没有更新,若内容或图片失效,请留言反馈。

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

单行溢出隐藏

overflow:hidden; //文字长度超出限定宽度,则隐藏超出的内容
text-overflow:ellipsis; //规定当文本溢出时,显示省略符号来代表被修剪的文本
white-space:nowrap; //设置文字在一行显示,不能换行

//上面是一行内容的时候,当有两行的内容时候

多行溢出隐藏

overflow: hidden; //文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis; //多行文本的情况下,用省略号“…”隐藏溢出范围的文本
display:-webkit-box; //和1结合使用,将对象作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical; //和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式。设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果,它需要组合其他的WebKit属性
本文共272个字数,您已阅读:平均阅读时长≈1分钟。
CSS
朗读
点赞
0
赞赏
海报
人生
欢迎
要时间嘉许,等春风得意,我正好遇上你!

微信/QQ/支付宝三合一收款码

微信
QQ
支付宝
打开微信/QQ/支付宝扫一扫,即可进行扫码打赏!
版权属于:

尘遇

最后修改:

2021 年 03 月 12 日 11 : 18 PM

本文链接:

https://chenyu.me/1271.html(转载时请注明本文出处及文章链接)

暂无评论

光阴者,百代之过客

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. chz举人
    2021-10-16

  2. ZMR秀才
    2021-10-16
  3. 鑫旺秀才
    2021-10-15
  4. ZMR秀才
    2021-10-15
  5. WF.秀才
    2021-10-14