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

Question

我有一个字符串，我截断它以放入卡片中，但当文本中有空白时，它完全适合，但当空白不存在时，它就会溢出。就像这个一样

我的截断代码看起来像这个

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

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

当我在CSS中使用文本溢出时，它不会覆盖高度就像这个

我的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;
}