Question

我正在<div>内部渲染一些文字。 width的{{1}}受其父级<div>值的约束。由于这种约束，文本包装。

考虑到某些句子长度，元素的布局可能看起来非常不平衡而且很差。发生这种情况是因为max-width值被视为max-width，因为文本换行时，较小的width值就足够了。

有可能向浏览器解释一下吗？可能使用width / max-width: min-content？

我不相信这是可能的，但我想在放弃之前确认。

作为参考，这里有两个包含文本的框。第一个文本以这样的方式包装文本，即右侧有大量的可用空间。第二个框没有这个问题，因为它没有包装。

max-width: max-content

*,
*::before,
*::after {
  box-sizing: border-box;
}
.box {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}
.tooltip {
  position: absolute;
  max-width: 280px;
  padding: 5px 8px;
  font-size: 13px;
  line-height: 16px;
  color: white;
  pointer-events: none;
  background-color: rgba(50, 50, 50, 0.9);
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 2px 2px 4px rgba(0, 0, 0, 0.28);
}
.tooltip-content {
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 1

在过去的几年里，关于这个特殊的怪癖有很多讨论。 This post很好地总结了问题和修复它的传统方法。他们提出的解决方案已由Adobe实施，可能符合您的需求jQuery plugin。希望这将成为未来CSS规范的一部分！

由于max-width，在子文本换行时智能地减少父元素的宽度

1 个答案: