即使我使用子字符串截断 JS 中的字符串，文本也会溢出

Question

我有一个字符串，我截断它以适合卡片，但是当文本中有空格时它非常适合，但是当没有空格时它只会溢出Just like this

我的截断代码如下所示

function truncateString(string, maxLength) {
      console.log(`${string.length} and ${maxLength}`)
      return string.substring(0, maxLength) + "...";
}

可能是什么原因？ 有什么替代方案？

当我在 CSS 中使用 text-overflow 时，它不会覆盖高度 just like this

我的 HTML 代码外观

<div class="dateDiv">
  <p class="infoTxt">${noteObj.date}</p>
</div>
<div class="titleDiv">
  <p class="title">${truncateString(noteObj.title,15)}</p>
</div>
<div class="contentDiv">
  <p class="regularTxt">${truncateString(noteObj.note,188)}</p>
</div>
<div class="authorDiv">
  <p class="infoTxt">${noteObj.author}</p>
</div>
<i class="delBtn fas fa-trash-alt fa-lg"></i>
<div class="noteOverlay"></div>

Answer 1

在常规文本类中，添加以下 CSS 属性

regularTxt {
 ...

 word-break: break-all;
}