时间戳

首页 > 解决方案 > 如何防止多行文本填充父元素的整个宽度

css - 如何防止多行文本填充父元素的整个宽度

问题描述

假设我有一个具有设定宽度的容器元素。我有一个带有显示内联块的内容元素，可以包含一些文本。此文本可能太大，以至于必须填充多行。这样做的问题是多行文本的默认行为是将元素增长到父元素的完整宽度。

想象以下示例：

HTML：

<div class="container">
  <div class="content">
    Firstreallongword11 Secondalsolongword22 Thirdwordthatisconsiderablylonger
  </div>
</div>

CSS：

.container {
  width: 260px;
  border: solid blue 1px;
}
.content {
  display: inline-block;
  background: red;
}

因为这些是长词，它们将被放置在多行上。我对.content元素的期望是，它会增长到单行上最大单词的最大宽度。但是正如你所看到的，因为它由多行组成，所以元素会增长到.container.

小提琴

我想要实现的是，.content获得单行上最大项目的宽度，就像使用一个单行一样：

小提琴

有没有办法用纯 css/html 来实现这一点？

标签： csstextmultiline

解决方案

简单的答案是：不，你不能用纯 CSS 做到这一点。

但无论如何，这里有一个解决方案，这有点小技巧：它display: table-cell;用于.content元素，以及一个相当小的width值（它将调整为最长单词的实际值，在这种情况下就像一个min-width设置）：

.container {
  width: 260px;
  border: solid blue 1px;
}
.content {
  display: table-cell;
  width: 100px;
  background: red;
}
<div class="container">
  <div class="content">
    Firstreallongword11 Secondalsolongword22 Thirdwordthatisconsiderablylonger
  </div>
</div>

推荐阅读