[ CSS ] 内容超出容器后 以...省略

内容超出容器后 以…省略

当元素的内容超出容器宽度或高度时，通常会导致布局出现问题。为了解决这个问题，CSS 提供了一种省略超出内容的技术。本文将介绍如何使用 CSS 实现以省略号(…) 来表示内容超出容器的效果

好了废话不多说，接下来进入主题

当前效果

代码

<template>
  <div class="box">有志者，事竟成，破釜沉舟，百二秦关终属楚; 有心人，天不负，卧薪尝胆，三千越甲可吞吴</div>
</template>

<style lang="scss">
.box {
  width: 150px;
  padding: 20px;
  margin: 50px auto;
  color: #fff;
  background-color: cornflowerblue;
}
</style>

单行省略

需求： 使所有文本在一行显示，显示不下就以 ... 形式省略

效果

代码

.box {
  width: 150px;
  padding: 20px;
  margin: 50px auto;
  color: #fff;
  background-color: cornflowerblue;

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

核心代码

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行省略

需求： 使文本只显示 2 行，显示不下就以 ... 形式省略

效果

代码

.box {
  width: 150px;
  padding: 20px;
  margin: 50px auto;
  color: #fff;
  background-color: cornflowerblue;

  p {
    display: -webkit-box !important;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

核心代码

display: -webkit-box !important;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

-webkit-line-clamp 代表行数，限制内容最多出现几行