html - 自动换行:断词在<small>或任何其他元素中不起作用

所以我有这样的代码。但是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这是我项目中的外观。因此，我希望这些单词能打断然后消失。我不需要内联块。因此，我希望打破“Tılsımı”这个词。我不确定我想要的东西是否可行，但我只是想问问CSS专家。

最佳答案

<small>默认为内联元素，不会采用任何引用block元素的设置，例如width。因此，如果您仍然希望保留它并进行width设置，则必须通过添加display: 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仅在长单词周围，并且包含word-break属性，因此它是单词可以中断的唯一位置：

关于html - 自动换行:断词在<small>或任何其他元素中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48403150/