如何使用文本溢出防止断字

Question

我正在尝试为某些标题设置最大行数，但问题是有时一行会以断词结尾。我需要的是，如果一个单词必须被打破，它应该被完全隐藏，并且省略号放在前一个单词之后。此代码显示了问题：#head{width:300px;font-size:20px;display:-webkit-box!important;color:#000000!important;text-overflow:ellipsis!importa

P粉231112437 · Answer

要达到完全隐藏断词并将省略号放在前一个词后面的效果，您可以使用 JavaScript 来操作文本内容。以下是如何修改代码以实现此目的的示例：

function truncateText(element, maxLength) {
  const text = element.innerText;
  if (text.length <= maxLength) return;

  const truncatedText = text.slice(0, maxLength);
  const lastSpaceIndex = truncatedText.lastIndexOf(' ');

  element.innerText = truncatedText.slice(0, lastSpaceIndex) + '...';
}

const headlineElement = document.getElementById('headline');
truncateText(headlineElement, 100);

#head {
  width: 300px;
  font-size: 20px;
  display: -webkit-box !important;
  color: #000000 !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}


  
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a

在此代码中，JavaScript 函数 truncateText 用于在文本内容超过指定的最大长度时截断文本内容。该函数查找最大长度内的最后一个空格字符，并用省略号替换剩余的文本。

在添加省略号之前，您可以将 maxLength 参数调整为所需的字符数。

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程