css多行文字溢出

最新推荐文章于 2024-12-23 16:59:55 发布

家里有只小肥猫

最新推荐文章于 2024-12-23 16:59:55 发布

阅读量200

点赞数 1

CC 4.0 BY-SA版权

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m1011815213/article/details/137346745

本文介绍了如何使用HTML和CSS中的text-overflow,overflow,-webkit-line-clamp等属性来实现文本内容在有限宽度下的两行溢出隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    </style>
  </head>
  <body>
    <div class="box">
      多行文字这里示例用的2行溢出隐藏为...多行文字这里示例用的2行溢出隐藏为...多行文字这里示例用的2行溢出隐藏为...多行文字这里示例用的2行溢出隐藏为...多行文字这里示例用的2行溢出隐藏为...多行文字这里示例用的2行溢出隐藏为...
    </div>
  </body>
</html>

多多练习 后面会持续更新小tips