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这就是它在我的项目中的样子。所以我希望这些话能够打破并消失。我不需要内联块。所以我希望，“Tılsımı”一词打破。我不确定我想要的东西是否可行但是，我只是想问一下css专家。

Answer 1

默认情况下，

<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仅围绕长字并包含分词属性，因此它是唯一可以使用单词的地方打破：

Answer 2

您只需要添加属性“display：inline-block”，请参阅代码段：

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

自动换行：在<small>或任何其他元素

2 个答案: