Word-wrap: break-word在<small>等元素中失效的解决咨询

核心原因很简单：<small>是行内元素，这类元素天生就不遵守你设置的width属性——它的宽度完全由内部内容撑开，没有固定的宽度限制，自然触发不了word-wrap（现在更推荐用标准属性overflow-wrap）的断词逻辑。而<div>是块级元素，会遵守宽度设置，所以断词能正常工作。

既然你不想修改<small>的display属性，这里有几个可行的方法：

1. 用word-break: break-all强制断词 #

这个属性会直接忽略单词完整性，只要空间不够就从任意位置换行，能快速解决长单词截断问题：

<small style="width: 15px; word-break: break-all;">+{{$s->type }} {{$s->name}}</small>
<small style="width: 15px; word-break: break-all;">asfasfassaasfdffgdfgd</small>

比如你提到的"Tılsımı"，会被直接切成符合宽度的片段，缺点是可能破坏单词的自然结构。

2. 给父容器设置宽度，配合overflow-wrap: break-word #

如果希望尽量保留单词完整，实在放不下才截断，可以把<small>放在一个固定宽度的父容器里，再给<small>加上overflow-wrap: break-word：

<div style="width:15px;">
  <small style="overflow-wrap: break-word;">+{{$s->type }} {{$s->name}}</small>
  <small style="overflow-wrap: break-word;">asfasfassaasfdffgdfgd</small>
</div>

父容器的宽度会约束<small>的可用空间，触发断词逻辑，而且完全不需要修改<small>的display属性。

3. 用hyphens: auto实现智能断词（适合多语言场景） #

如果你的内容是土耳其语这类有明确断词规则的语言，推荐用这个方法——它会根据语言语法在合适的位置添加连字符后换行，看起来更自然：

<small style="width:15px; hyphens: auto;" lang="tr">Tılsımı</small>

注意一定要给元素设置正确的lang属性（比如土耳其语是tr），浏览器才能识别并应用对应的断词规则。

小提示 #

现在CSS标准里word-wrap已经被overflow-wrap取代，虽然大部分浏览器还兼容旧属性，但建议优先使用overflow-wrap以符合最新规范。

内容的提问来源于stack exchange，提问作者Berke