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

内容超出容器后 以...省略

当前效果
Snipaste_2023-11-10_20-50-10.jpg

代码

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

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

单行省略

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

效果
Snipaste_2023-11-10_20-51-11.jpg

代码

.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 行,显示不下就以 ... 形式省略

效果
Snipaste_2023-11-10_20-52-35.jpg

代码

.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 代表行数,限制内容最多出现几行

评论区
头像