Question

我想将div置于另一个div的中心，因此我正在使用flex来完成此操作。设置了伸缩容器，伸缩项目内部有一些文本。我可以获取flex项来调整其大小以适应其内容，但是当我有一段自动换行的文本时，我遇到了一个问题，就像这样：

div.flex-container {
  max-width: 400px;
  border: 1px solid blue;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.flex-item {
  padding: 1rem;
  border: 1px solid red;
  flex: none;
  max-width: calc(100% - 2rem);
  width: fit-content;
  width: -moz-fit-content;
}

h2 {
  /* need to wrap and not force parent to be 100% */
}

<div class="flex-container">
  <div class="flex-item">
    <h2>HERE IS TEXT TO SEEEEEEEEEE</h2>
    <p>Lorem ipsum dolor sit amet, consetetuar</p>
    <a href="#">here is a link</a>
  </div>
</div>

您会注意到flex项占据了父div的全部空间，因为被包装的内容占据了其父的全部宽度，而与h2的视觉宽度无关。如果将h2的宽度设置为0，则flex项实际上会缩小到下一个最大元素，如下所示：

div.flex-container {
  max-width: 400px;
  border: 1px solid blue;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.flex-item {
  padding: 1rem;
  border: 1px solid red;
  flex: none;
  max-width: calc(100% - 2rem);
  width: fit-content;
  width: -moz-fit-content;
}

h2 {
  /* need to wrap and not force parent to be 100% */
  width: 0;
}

<div class="flex-container">
  <div class="flex-item">
    <h2>HERE IS TEXT TO SEEEEEEEEEE</h2>
    <p>Lorem ipsum dolor sit amet, consetetuar</p>
    <a href="#">here is a link</a>
  </div>
</div>

在视觉上，我想要的是文本能够正常换行而不会强制flex项为flex容器的整个宽度。在不影响内容布局的情况下是否有可能？

如何使自动换行的文本不占据整个父级宽度？

0 个答案: