html - 自动换行 : break-word not working in <small> or any other element

Question

所以我有这样的代码。但是 word-wrap 不起作用。当我将它更改为 div 但我需要 small 或任何其他元素时它会起作用。那么有什么想法为什么它不起作用并且没有打破这个词吗？

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

<small style="width: 15px; word-wrap: break-word;">asfasfassaasfdffgdfgd</small>

www.ibb.co/mkaKrw 这就是它在我的元素中的样子。所以我希望这句话能被打破并流传下来。我不需要内联 block 。所以我想要打破“Tılsımı”这个词。我不确定我想要的东西是否可行，但我只是想问问 css 专家。

Answer 1

<small>默认情况下是内联元素，不会采用任何引用 block 的设置元素，例如 width .所以如果你仍然想保留它并拥有 width设置工作，您必须通过添加 display: block 将其转换为 block 或内联 block 元素或 display: inline-block .我在下面的代码片段中添加了背景颜色以使其更加明显。

<small style="width: 15px; word-wrap: break-word;display:block;background:green;">+{{$s->type }} {{$s->name}}</small>

<small style="width: 15px; word-wrap: break-word;display:inline-block;background:yellow;">asfasfassaasfdffgdfgd</small>

评论后添加:

我想你有这样的情况:

.container {
  width: 90px;
  border: 1px solid #ccc;
}

.container small {
  word-wrap: break-word;
}

<div class="container">
  <p>This is a text that contains some <small>veeeeeeeeeeeerrrrrry</small> long words. This is a text that contains some <small>veeeeeeeeeeeerrrrrry</small> long words. This is a text that contains some <small>veeeeeeeeeeeerrrrrry</small> long words.</p>
</div>

这里是 width适用于容器，不适用于 small , small只围绕长词并包含分词属性，所以它是唯一可以分词的地方: