引导文本截断

在编写 web 应用时，经常需要在列表或文字中截断过长的文本，以便更好地展示内容和提高页面的美观度。通常我们使用三个点（...）来表示被截断的文本。这种技术被称为“引导（truncation）”。

实现方法

引导文本截断可以通过 CSS 或 JavaScript 实现。在这里我们只讨论 CSS 实现的方式。

使用 CSS 实现

CSS 中 text-overflow: ellipsis 属性可以帮助我们很容易地实现引导文本截断。下面是示例代码：

.truncate {
  white-space: nowrap; /* 让文本不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 用 ... 表示被截断的部分 */
}

使用 JavaScript 实现

如果需要在动态生成的内容中使用引导文本截断，可以使用 JavaScript 动态计算被截断的位置，然后将原文本文本截断并添加省略号。

function truncateText(selector, maxLength) {
  var text = document.querySelector(selector).innerText;
  if (text.length <= maxLength) {
    return;
  }
  var truncated = text.substr(0, maxLength) + '...';
  document.querySelector(selector).innerText = truncated;
}

总结

引导文本截断是 web 开发中常用的技术之一，可以通过 CSS 或 JavaScript 实现。在实际应用中，应根据实际需要选择适合的方法。