CSS文字超出自动换行

CSS / 2022年3月2日 / hamster

先看示例

<p>
        @for($i = 0; $i < 100; $i++)
            <span><a href="#">张三</a></span>
            <span><a href="#">laravel</a></span>
            <span><a href="#">image</a></span>
            <span><a href="#">欧阳洋洋</a></span>
        @endfor
    </p>

页面效果

可以看到，中文会截断后换行，而英文不会

现在给P标签定义

word-break: keep-all;

页面效果

可以看到，宽度不够的情况下，中文英文都会换行，不再截断

除keep-all之外，word-break还有其他属性

word-break: normal;  #默认

word-break: break-all; #中英文都会截断换行

word-break: break-word; #中文截断换行，英文不会