html - 最小和最大宽度之间的文本容器的 CSS

Question

我如何设置包含文本的 DIV 样式，以便在 min-width 和 max-width 之间取最小长度>?

例如，如果我将最小值和最大值设置为 200 和 400 像素，我想要:

• 文本短于 200px 的 div 宽度为 200px
• 文本宽度在 200 像素到 400 像素之间的 div
• 要换行的文本超过 400 像素的 div

我制作的这个 jsFiddle 解释得更好:http://jsfiddle.net/LHFSn/ ...这听起来简单明了，但我似乎无法理解。

不，显而易见的是:

min-width: 200px;
max-width: 400px;

...根本没有给我想要的东西。

Answer 1

设置

display: inline-block

将允许您在宽度方向上获得所需的结果，但也意味着元素将内联显示，也就是说，如果它们适合，则一个接一个地显示。
您可以通过将元素包装在 block 式容器中来避免这种情况。虽然这听起来远非理想，但这是我脑海中第一个可行的想法。

扩展你的进一步问题，你可以 float 这些元素，将它们包装在一个也内联显示的容器中，然后使用 Rúnar Berg 的空 block 建议来阻止它。

See sample jsFiddle
Clearfix reference

HTML:

ACTUAL:
<div></div>
<div class="wrapper cf">
<div class="flex-text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
<div class="flex-text">
    Lorem ipsum dolor sit amet.
</div>
<div class="flex-text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<div></div>
Further content

CSS:

.flex-text {
    min-width: 200px;
    max-width: 400px;
    display: inline-block;
    background: #def;
    float: left;
    clear: both;
}

/* this is just to show a 200px ruler for reference */
.flex-text:after {
    content: "";
    display: block;
    width: 200px;
    border-top: 4px solid black;
    margin: 0 0 20px 0;
}

.wrapper {
    display: inline-block;
    background: lightblue;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}