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

<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会将长单词直接显示在下一行，不会将单词截断