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

Question

我截断了字符串以适合卡片，但是当文本中有白色 space 时它完全适合但是当白色 space 不存在时它就会溢出 Just like this

我的截断代码如下所示

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

可能是什么原因？什么可以替代？

当我在 CSS 中使用文本溢出时，它不会覆盖高度 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

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

regularTxt {
 ...

 word-break: break-all;
}

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

Text is overflowed even i use substring to truncate the string in JS

javascript

css

truncate