用css实现超出两行显示省略号

最新推荐文章于 2024-04-18 14:02:12 发布

suoh's Blog

最新推荐文章于 2024-04-18 14:02:12 发布

阅读量3.1k

点赞数 2

分类专栏： ✿✿--css 文章标签：用css实现超出两行显示省略号

本文链接：https://blog.csdn.net/qq_41579104/article/details/98959837

版权

✿✿--css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      .example{
        margin-right:20px;
        font-size: 20px;
        /*line-height: 1.5em;*/
      }
      .warp2{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div id="test" class="example warp2">
      如图，如果在用户手机屏幕宽度下内容超出两行则显示阅读全文，否则不显示阅读全文如图，如果在用户手机屏幕宽度下内容超不显示阅读全文，否则不显示阅读全文如如果在用户手机屏幕宽度下内容超出两行则显示阅读全文，否则不显示阅读全文如图，如果在用户手机屏幕宽度下内容超不显示阅读全文，否则不显示阅读全文如如果在用户手机屏幕宽度下内容超出两行则显示阅读全文，否则不显示阅读全文如图，如果在用户手
    </div>
    <script type="text/javascript">
      
    </script>
  </body>

具体实现的属性介绍：

-webkit-line-clamp： 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box：必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient： 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。水平方式：horizontal

text-overflow：可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本。

-webkit-line-clamp：<number> number用于显示的行数

-webkit-box-orient 默认是水平的，当值设为vertical时为垂直排列

缺陷：

-webkit-line-clamp这个属性目前仅支持webkit浏览器，比较合适WebKit浏览器或移动端（移动端绝大部分是WebKit内核的浏览器

目前没有浏览器支持 box-orient 属性。

Firefox 支持替代的 -moz-box-orient 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。

拓展--单行文本溢出显示省略号：

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap

suoh's Blog

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
用css实现超出两行显示省略号

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> *{ margin: 0; padding: 0; ...
复制链接

扫一扫