Display text that exceeds the container as ellipses (...)

To display text that exceeds the container as an ellipsis (...), you can use a CSS text-overflow: ellipsisproperty. Make sure to set white-space: nowrapand overflow: hidden. Be sure to set the width, the following is an example:

1. Single line

<template>
  <div class="text">
    这是一段很长的文字，超出容器宽度的部分将被替换为省略号。
  </div>
</template>

<style>
.text {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

Two, multiple lines

.text {
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里的数字表示你想显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}

In this example, .textthe class element will be limited to a width of 200 pixels and display two lines of text. Text longer than two lines will be replaced with ellipses. You can -webkit-line-clampchange the number of rows displayed by adjusting the value of the property.