Question

我有div内max-width: 50%。内部div包含可以换行到下一行的内容。当内部div的内容换行到下一行时，由于内部div为＆gt;它的父级宽度的50％，div继续具有其父级宽度的50％，而不是具有与其新包装内容匹配的宽度。

当内容换行到新行时，有没有办法让内部div的宽度缩小？

.outer {
  background-color: red;
  width: 100%;
  position: relative;
}

.inner {
  display: inline-block;
  background: blue;
  max-width: 50%;
}

<div class="outer">
  <div class="inner">I_have_50%_width even_after_line_wraps</div>
</div

Answer 1

使用以下css更新您的内部类。

.inner {
 display: inline-block;
 background: blue;
 max-width: 50%;
 height: auto;
 word-wrap: break-word;
}

添加word-wrap: break word属性会将div中的单词拆分为新行。您可以从here.

了解有关自动换行属性的更多信息

在内容中断到新行后，将div调整为内容大小？

1 个答案: