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

单行文字省略样式代码,添加对应的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)    收藏  举报