从无限制渲染到裁剪优化：多行文本溢出省略显示的交互设计原理和实战应用

2023-12-07 09:23:03

在网页和移动端应用程序中优雅地处理多行文本溢出

简介

在网页和移动端应用程序中呈现多行文本时，经常会遇到文本内容超出容器大小的情况。传统上，我们可以使用 CSS 的 text-overflow 属性来实现文本溢出省略，但这种方法存在一些局限性，比如难以控制省略号的位置和样式，当文本包含换行符时也无法正确处理。

本文将介绍一种更加灵活和强大的方法来实现多行文本溢出省略，它结合了 CSS 和 JavaScript，通过先无限制渲染一次文本，然后判断是否进行裁剪，并添加 Tooltip 来优化展示逻辑。这种方法可以很好地解决传统方法的局限性，并提供更好的用户体验。

实现原理

1. 无限制渲染文本：

首先，我们将文本放置在一个没有任何溢出限制的容器中，使其可以无限制地渲染。

2. 检测文本溢出：

通过 JavaScript 获取文本实际占据的空间，并与容器的大小进行比较，如果文本溢出容器，则需要进行裁剪。

3. 裁剪文本：

裁剪文本时，我们需要考虑以下几个因素：

省略号的位置： 通常情况下，省略号应该放在文本的末尾，但对于某些特定场景，如诗歌或歌词，省略号可能需要放在其他位置。
省略号的样式： 我们可以通过 CSS 自定义省略号的样式，比如改变颜色、大小或添加动画效果。
文本的对齐方式： 如果文本是居中对齐或右对齐的，则需要调整省略号的位置，使其与文本对齐。

4. 添加 Tooltip：

为了让用户能够看到被裁剪的文本，我们可以添加一个 Tooltip，当用户将鼠标悬停在省略号上时，Tooltip 会弹出显示完整的文本。

实战应用

1. 基本使用

<div class="text-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec eget diam eget risus vehicula rutrum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla porttitor massa id lacus ullamcorper, at molestie lacus hendrerit. Phasellus vitae sapien eget purus tristique interdum. Sed placerat sollicitudin lacus, vel efficitur augue faucibus eget.</p>
</div>

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

2. 自定义省略号样式

.text-container {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-container p {
  color: #333;
  font-size: 14px;
}

.text-container p:hover {
  background-color: #eee;
}

.text-container p::after {
  content: "...";
  color: #999;
  font-size: 12px;
  margin-left: 5px;
}

3. 添加 Tooltip

<div class="text-container">
  <p title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec eget diam eget risus vehicula rutrum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla porttitor massa id lacus ullamcorper, at molestie lacus hendrerit. Phasellus vitae sapien eget purus tristique interdum. Sed placerat sollicitudin lacus, vel efficitur augue faucibus eget.">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec eget diam eget risus vehicula rutrum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla porttitor massa id lacus ullamcorper, at molestie lacus hendrerit. Phasellus vitae sapien eget purus tristique interdum. Sed placerat sollicitudin lacus, vel efficitur augue faucibus eget.</p>
</div>

<style>
.text-container {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-container p {
  color: #333;
  font-size: 14px;
}

.text-container p:hover {
  background-color: #eee;
}

.text-container p[title] {
  cursor: pointer;
}

.text-container p[title]::after {
  content: "...";
  color: #999;
  font-size: 12px;
  margin-left: 5px;
}

.tooltip {
  position: absolute;
  display: none;
  padding: 5px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.text-container p:hover .tooltip {
  display: block;
}
</style>