h、p等标签输入英文或数字时溢出

原创于 2022-11-07 16:55:48 发布 · 387 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

常见问题专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在CSS布局中遇到的英文和数字溢出问题，并提供了两种解决方案：使用word-break属性截断长单词，或者使用word-wrap属性将长单词换行显示。通过调整这些属性，可以有效避免内容超出指定的宽度。

<ul>
    <li>
        <h4>实战演练实战演练实战演练实战演练实战演练</h4>
        <h4>123122411254324512321874932811111111111743</h4>
        <h4>joijoijiojnnnnnnnnnnnnnnnnnnnnnnnnnnn</h4>
    </li>
</ul>

li {
    list-style: none;
}

ul li {
    width: 228px;
    height: 270px;
    background-color: aquamarine;
}

ul li p {
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}

在这里插入图片描述
类似于上面，已经给li指定了宽度，同样的样式设置，在输入汉字时不会出现溢出的情况，但在输入英文或数字时会出现溢出。
处理方法：在父级元素加入加入word-break: break-all;或word-wrap: break-word;
即：

ul li {
    width: 228px;
    height: 270px;
    background-color: aquamarine;
    word-break: break-all;
    /* word-wrap: break-word; */
}

word-break和word-wrap的区别：
（1）使用word-break：
在这里插入图片描述
（2）使用word-wrap

（3）word-break会将长的单词截断显示，而word-wrap会将长单词直接显示在下一行，不会将单词截断