标签搜索
隐藏侧边栏

line-clamp 限制你的内容行数(...)

搞前端的半夏
2022-05-09 / 0 评论 / 0 点赞 / 20 阅读 / 1,401 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-09,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

仔细看下面两条数据的简介部分,你会发现啥?

image-20220509212830583

摘要显示的行数不同的。广告是两行,文章摘要是一行。
当我做了下面的操作:将line-clamp 取消掉,就显示出完整的文本。

image-20220509213056534

line-clamp

它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才会生效。

语法

.元素 { line-clamp: [none | <integer>]; }

设置截断内容前的最大行数,然后在最后一行的末尾显示省略号 (...)

目前在使用的时候必须是 -webkit-line-clamp
这个是因为line-clamp是CSS3提出的,目前的兼容性不好。
虽然caniuse上很好!
Chrome实测:
image-20220509213148211

举例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div>
        大家仔细看有啥不同,~~一个是广告,一个是文章~~。其实是摘要显示的行数不同的。广告是两行,文章摘要是一行。
        当我做了下面的操作:将line-clamp 取消掉,就显示出完整的文本。    </div>
  </body>
</html>

image-20220509213228380

这里的省略号应呈现为 Unicode 字符 (U+2026)

不要滥用height

当容器高度大于内容高度,其他内容也会显示出来,当然省略号仍然在

   div {
        width: 300px;
        height:300px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

image-20220509213246384

当容器高度小于于内容高度。

  div {
        width: 300px;
        height:20px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

image-20220509213305081

后记

截断文本的方式有很多,line-clamp胜在可以指定行数。

0

评论区