css文本显示两行,多余的用省略号[…]表示

立即领取

最高 ¥2000 红包 限量领取

云服务器、主机等产品通用,可叠加官网常规优惠使用 | 限时领取

首先看一下css单行文本超出部分显示省略号[…]实现代码:

overflow: hidden;//规定当内容溢出元素框时修剪。
text-overflow:ellipsis;//显示省略符号来代表被修剪的文本。
white-space: nowrap;//规定段落中的文本不进行换行;

对于多行文字, 上面的代码就不适用了。这时候我们就要用到WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

多行超出部分显示省略号[…]实现代码:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

我们只需要改变-webkit-line-clamp的值就能实现在第n行用省略号[…]表示了。

【知识点】

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient; 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

完整的实例展示

实例代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多行文本实现超出...</title>
<style type="text/css">
    .text {
    text-overflow: ellipsis;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 10px;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
    }
</style>
</head>

<body>
<span class="text">酷我音乐车机版v5.0.0.3破解版 免登陆下VIP音乐多行文本实现超出...多行文本实现超出...</span>
</body>
</html>

实例效果图:

以上就是《css文本显示两行,多余的用省略号[…]表示》的全部内容,你学会了吗?

赞 (12) 打赏
  • 欢迎小伙伴加入,本站原创文章交流群:进站必看
  • 本作品是由 白露博客 会员 白露 投递的作品。
  • 网络媒体或个人转载请务必署名并注明出处和链接!:http://blmoe.cn/873.html
  • 凡是原创作品,禁止再次修改后发布;任何商业用途均须联系作者。如未经授权用作他处,作者将保留追究侵权者法律责任的权利。

评论 0

收起表情
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

「赠人玫瑰,手留余香」

支付宝扫一扫打赏

微信扫一扫打赏