Question

看看这个小提琴：http://jsfiddle.net/guard/UtpGm/

w是一个包装器，具有最小和最大宽度。

里面的title里面有一个很长的文字。

据我所知，发生了以下情况

包装器span / div / whatever（同时div和span block和inline-block同时尝试显示模式）首先尝试占用尽可能宽的宽度尽可能，并计算足以使标题在一行上的宽度（样本为483px）
然后将宽度与指定的最小和最大宽度进行比较，并进行调整 - 在这种情况下，将其减小到380px

因此，包装器内部有未使用的空间。

在给定最小和最大宽度约束的情况下，如何使内容适合（看起来相同但没有未使用的空间）“尽可能少的空间”？在示例中，适当的宽度为312px。

注意：我可以使用包装器做任何事情。它可以绝对或相对定位，它可以是任何其他元素的子元素，可以添加任何其他包装器。

Answer 1

这是我想到的第一个有效的解决方案：

$('#w').css({"width": $('#title').width()});

小提琴：http://jsfiddle.net/UtpGm/9/

当然，人们更喜欢纯CSS方法，所以我很乐意看到其他答案。

Answer 2

CSS中没有这种宽度计算。

目前CSS中唯一足够接近的是使用display：table-cell： http://jsfiddle.net/UtpGm/13/

定义table-cell时，其width:auto值被解析为 width:max-content-width。这里max-content-width是一个内部值，等于内容的固有最大宽度。

对于<p>元素，当其替换为单行时，其内在最大宽度将等于其文本的宽度。如果<p>内部有<br> - 到最长行。

Answer 3

出于某种原因，这有效：

#w {
border: 1px solid red;
min-width: 10px;
max-width:380px
width: auto !important;
display: inline-block;
}
#title{ max-width:380px; display: inline-block;}

另外请记住，你的一些示例文本，即“longlonglonglong”算作一个单词，因为没有空格，所以如果它不能适合该行并导致白色，它将自动跳转到下一行 - 跨度中的空间。

希望这会有所帮助，欢呼

寻找内容最佳宽度

3 个答案: