前端——单行文字溢出省略与多行文字溢出省略

单行文字省略样式代码，添加对应的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>

效果：

多行文字省略样式代码，添加对应的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 />

        至若春和景明，波澜不惊，上下天光，一碧万顷，沙鸥翔集，锦鳞游泳，岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极！登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。<br />

        嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲，居庙堂之高则忧其民，处江湖之远则忧其君。是进亦忧，退亦忧。然则何时而乐耶？其必曰“先天下之忧而忧，后天下之乐而乐”乎！噫！微斯人，吾谁与归？<br />

        时六年九月十五日。
      </p>
    </div>
  </body>
</html>

效果：

posted @ 2021-03-23 09:43  灯火十里  阅读(90)  评论(0)    收藏  举报