html中文本折叠问题解决
2022-05-22 本文已影响0人
小疯伊始
在html中，文本过长是经常遇到的问题，解决过程中有不同场景，不同的解决方法。
单文本
el{
width: {自己长度};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多文本
el{
height: 100px;
line-height: 20px;
overflow: hidden;
}
万能js解决
在node中
str 为自己文本， limit 为自己需要的长度 ,在react中使用特别有效
{ (str.length > limit) ? ((str.substring(0, len(str) - limit)) + '...') : str }
正常hmtl中
<html>
<head>
<script type="text/javascript">
//加载html结束后再执行js
document.addEventListener('DOMContentLoaded', function() {
var elemArr = document.getElementsByClassName("txt-10");
for (const elem of elemArr) {
txt = elem.innerHTML
l = txt.length
if (l > 10) {
var sub = txt.substring(0, 10)
sub = sub + " ..."
elem.innerHTML = sub
}
}
});
</script>
</head>
<body>
<div class="txt-10">abcdefghijklmnopqrs</div>
<div class="txt-10">abcdefghijklmnopqrstttttt</div>
</body>
</html>
