单行/多行文字溢出省略

最新推荐文章于 2022-04-20 16:30:06 发布

灯火十里

最新推荐文章于 2022-04-20 16:30:06 发布

阅读量119

点赞数

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

本文链接：https://blog.csdn.net/a1090008457/article/details/117325989

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

单行文字省略样式代码，添加对应的class即可

.text-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>单行文字溢出省略</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .container {
        margin: 20px auto;
        width: 300px;
        border: 1px solid #eee;
      }

      li {
        display: block;
        list-style: none;
        color: rgb(158, 152, 152);
        border-bottom: 1px dashed rgb(158, 152, 152);
        margin: 10px;
      }
      .text-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul>
        <li class="text-ellipsis">
          文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        </li>
        <li class="text-ellipsis">
          文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        </li>
        <li class="text-ellipsis">
          文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        </li>
        <li class="text-ellipsis">
          文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        </li>
        <li class="text-ellipsis">
          文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        </li>
      </ul>
    </div>
  </body>
</html>

效果：
单行文字溢出省略.png

多行文字省略样式代码，添加对应的class即可

.multiline-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 设置文字显示行数 */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    word-wrap: break-word;
}

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>多行文字溢出省略</title>
    <style>
      .container {
        width: 300px;
        margin: 20px auto;
        border: 1px solid rgb(155, 147, 147);
      }
      .multiline-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /* 设置文字显示行数 */
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal !important;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h3>岳阳楼记</h3>
      <p class="multiline-ellipsis">
        大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字<br />

        大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字<br />

        大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字<br />
      </p>
    </div>
  </body>
</html>

效果：
（原来代码中的文字用的是岳阳楼记，CSDN原创审核无法通过。。效果就是下面这样，代码把文字换掉了，可以自行尝试）
多行文字溢出省略.png

灯火十里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单行/多行文字溢出省略

单行文字省略样式代码，添加对应的class即可.text-ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}示例：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>单行文字溢出省略</title&gt
复制链接

扫一扫