html文本过长及数字不换行问题处理_html长数字不会换行-CSDN博客

本文链接：https://blog.csdn.net/weixin_36445197/article/details/121227643

本文介绍了HTML中数字和字母不换行显示的默认行为及如何通过CSS的`word-wrap`和`word-break`属性进行调整。同时，讲解了如何使用CSS实现超出n行显示省略号的效果，并提供了不同行数限制的示例代码。此外，还分享了一个JavaScript函数，用于处理文本超出显示的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、HTML中数字和字母不换行显示

在HTML中标签中的数字和字母默认是不换行的，如果要将他们换行，在CSS中添加”word-wrap: break-word;” 即可解决

语法：word-wrap: normal|break-word;

normal : 单词默认是不能断开的，长单词就会溢出
break-word : 会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句。

如果需要，词内换行使用（word-break）即可

语法：word-break:break-all;不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

  word-break:break-all;
  word-wrap:break-word

2、超出n行…显示

.omit {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
}

.omit-1 {
  -webkit-line-clamp: 1;
}

.omit-2 {
  -webkit-line-clamp: 2;
}

.omit-3 {
  -webkit-line-clamp: 3;
}

.omit-6 {
  -webkit-line-clamp: 6;
}

3、js处理超出显示…

function treatWord(word) {
    let s = word;
    let el = document.getElementById('body-title') as any;
    let n = el.offsetHeight;  // 取到当前包裹文本的父级元素的高度， 
    for (let i = 0; i < s.length; i++) {
        el.innerHTML = s.substr(0, i);  // 表示在for循环中取出长度递增的文段
        if (n < el.scrollHeight) {
            // 当前文本高度的内容的高度代表着刚好达到溢出的界限，
            el.style.overflow = 'hidden';  // 将父级元素设置为隐藏
            el.innerHTML = s.substr(0, i - 3) + '...';  // 最后三个字
            break;
        }
    }
}