如何解决即使我使用子字符串截断 JS 中的字符串,文本也会溢出
我有一个字符串,我将其截断以适合卡片,但是当文本中有空格时它完全适合,但是当不存在空格时它只会溢出 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>
解决方法
在常规文本类中,添加以下CSS属性
regularTxt {
...
word-break: break-all;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。