Question

我有几个div，它们都被设计为内联块，因此彼此相邻排列。这些div的max-width为140px，并包含导致它们的宽度变化到该大小的文本。

As demonstrated in this fiddle，比max-width属性更宽的文本包装，正如您所期望的那样。问题是它似乎也迫使其容器div停留在max-width，即使包装文本在技术上不需要那么大的空间。

是否有跨浏览器，仅限HTML / CSS的方式来收缩包装＆＃34;文本包装后，这些块会以最小宽度覆盖吗？我知道我可以使用适当放置的<br>强制它，但这些块应该包含用户输入的文本。

＆＃13;

.block {
    display: inline-block;
    vertical-align: top;
    max-width: 140px;
    background-color: lightgrey;
    text-align: center;
}

＆＃13;

<div class="block">A single line</div>
<div class="block">Two distinctively different lines</div>
<div class="block">A somewhat egregious demonstrative amount of text</div>

＆＃13;

Answer 1

@BoltClock在https://stackoverflow.com/a/12377883/3903374

解释了这个问题

您唯一的选择是JavaScript。

您可以通过缩小每个div的宽度直到其高度发生变化来实现：

var d = document.querySelectorAll('.block'),
    i, w, width, height;

for(i = 0; i < d.length; i++) {
  width = d[i].offsetWidth;
  height = d[i].offsetHeight;

  for (w = width; w; w--) {
    d[i].style.width = w + 'px';
    if (d[i].offsetHeight !== height) break;
  }
  
  if (w < d[i].scrollWidth) {
    d[i].style.width = d[i].style.maxWidth = d[i].scrollWidth + 'px';
  } else {
    d[i].style.width = (w + 1) + 'px';
  }
}

.block {
  display: inline-block;
  vertical-align: top;
  max-width: 140px;
  background-color: lightgrey;
  text-align: center;
}

<div class="block">A single line</div>
<div class="block">Two distinctively different lines</div>
<div class="block">A somewhat egregious demonstrative amount of text</div>
<div class="block">LongTextThatsWiderThanMaxWidth Loremipsumdolorsitamet,consecteturadipiscingelit</div>

Answer 2

而不是max-width: 140px，请考虑width: min-content。

<强> CSS

.block {
    display: inline-block;
    vertical-align: top;
    /* max-width: 140px; */
    background-color: lightgrey;
    text-align: center;

    /* new */
    width: min-content;
    padding: 0 5px; 
}

DEMO：https://jsfiddle.net/ex4n8m49/2/

注意：在实施min-content之前，请检查prefixing requirements和browser support。

替代解决方案

我不确定是否只有CSS解决方案，正如您所要求的那样。如果您决定尝试JavaScript，以下帖子的接受答案可能会对您有所帮助：

的 Shrink DIV to text that's wrapped to its max-width?

Answer 3

您可以只设置 overflow-wrap: anywhere; 或其他值之一（如 break-word），它应该可以工作！

将包含元素的文本强制包装到max-width

3 个答案:

替代解决方案