用以下方式解决前端文本多行省略的问题

前端

2024-01-19 14:45:51

在前端中，文本多行省略是一个常见的需求，比如在列表、卡片等场景中，需要将长文本进行省略，只显示部分内容，并在结尾处添加省略号(...)。

解决文本多行省略问题的方法有很多，但有些方法可能存在一些问题，比如：

使用text-overflow: ellipsis属性，但是这种方法只能处理单行文本省略，无法处理多行文本省略。
使用overflow: hidden属性，但是这种方法可能会导致文本被截断，无法显示完整的内容。
使用JavaScript来动态截取文本，但是这种方法可能会影响性能，特别是对于大量文本需要省略的情况。

为了解决这些问题，本文介绍一种完美的前端文本多行省略解决方案，该方案使用CSS结合自负串长度来实现，具有以下优点：

可以处理多行文本省略
可以保留文本的完整性
不会影响性能

实现方法

使用CSS的overflow属性将文本设置为hidden，以便隐藏超出容器的部分。
使用text-overflow属性设置省略号(...)。
使用display属性将文本设置为inline-block，以便文本能够自动换行。
使用max-width属性设置文本的最大宽度。
使用line-height属性设置文本的行高。
使用font-size属性设置文本的字体大小。
使用padding属性设置文本的内边距。
使用margin属性设置文本的外边距。

示例

<div class="text-container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus ullamcorper. Nunc consectetur lorem at risus ullamcorper, sit amet rutrum lectus tincidunt. Sed laoreet aliquam lectus, et ultricies diam aliquam eget. Nullam velit nunc, tincidunt sed egestas eget, laoreet eu lectus. Mauris euismod metus eget lacus ultrices, vitae tempor turpis ultricies. Cras in accumsan ex. Nullam aliquet lacus sed lacus lacinia, ac fringilla metus mollis.
  </p>
</div>

.text-container {
  max-width: 300px;
  line-height: 1.5em;
  font-size: 16px;
  padding: 10px;
  margin: 10px;
}

.text-container p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}