文字移出隐藏（css方案）可指定第几行隐藏

最新推荐文章于 2024-08-23 11:10:08 发布

防火墙在线

最新推荐文章于 2024-08-23 11:10:08 发布

阅读量402

点赞数

分类专栏： web前端基础文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_40922551/article/details/124853616

版权

web前端基础专栏收录该内容

20 篇文章 1 订阅

订阅专栏

本文介绍了如何使用CSS实现HTML元素的一二三四五六七八九十内容在不同容器中的自适应隐藏与多行显示，包括`text-overflow`, `white-space`, 和 `overflow` 的应用。同时涵盖了`-webkit-line-clamp`属性在长文本截断中的作用。

摘要由CSDN通过智能技术生成

demo

代码

<!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 {
        font-size: 15px;
      }
      .demo1,
      .demo2 {
        width: 150px;
        background: #ccc;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .demo2::after {
        content: '你';
        opacity: 0;
      }
      .demo3 {
        width: 145px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        width: 400px;
        text-overflow: ellipsis;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 4; /*  第几行开始隐藏 */
        -webkit-box-orient: vertical;
        text-align: justify;
      }
    </style>
  </head>

  <body>
    <div class="demo1">一二三四五六七八九十</div>
    <div class="demo2">一二三四五六七八九十</div>
    <div class="demo3">一二三四五六七八九十</div>
    <p>
      一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十
    </p>
  </body>
</html>