单行截断css

兜里揣着星星

于 2023-02-07 14:06:37 发布

阅读量275

点赞数 1

分类专栏：前端 js 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/MCCLS/article/details/128917743

版权

前端同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

单行截断css

显示一行文字，多余省略号

<!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>
    .text {
      width: 100px;
      /* text-overflow属性规定当文本溢出包含元素时发生的事情。 */
      text-overflow: ellipsis;
      /*  ellipsis显示省略符号来代表被修剪的文本。 */
      /* overflow 属性规定当内容溢出元素框时发生的事情。 */
      overflow: hidden;
      /* hidden内容会被修剪，并且其余内容是不可见的。*/
      /* white-space 属性设置如何处理元素内的空白。 */
      white-space: nowrap;
      文本不会换行，文本会在在同一行上继续，直到遇到 <br>标签为止。
    }
  </style>
</head>

<body>
  <div class="text">德德玛木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木</div>
  <script></script>
</body>

</html>

显示两行文字，多余省略号：

<!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>
</head>
<style>
  .box {
    width: 100px;
    word-break: break-all;
    /* text-overflow属性规定当文本溢出包含元素时发生的事情。 */
    text-overflow: ellipsis;
    /*  ellipsis显示省略符号来代表被修剪的文本。 */
    /* overflow 属性规定当内容溢出元素时发生的事情*/
    overflow: hidden;
    /*hidden内容会被修剪，并且其余内容是不可见的*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 这里是超出几行省略 */
  }
</style>

<body>
  <div class="box">
    德德玛木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木木
  </div>
  <script>

  </script>
</body>

</html>