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

Question

如何设置带有文本的DIV 的样式，以便在min-width 和max-width 之间取最小长度？

例如，如果我将最小值和最大值设置为 200 和 400 像素，我希望：

• 将文本短于 200 像素的 div 设为 200 像素宽
• 文本宽度在 200 像素到 400 像素之间的 div 以具有文本的宽度
• 要换行的文本长度超过 400 像素的 div

我制作的这个 jsFiddle 更好地解释了它：http://jsfiddle.net/LHFSn/ ...听起来简单直接，但我似乎无法弄清楚。

不，很明显：

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

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

Answer 1

设置

display: inline-block

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

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

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;
}

Answer 2

您可以尝试将容器display 设置为table，将内部display 设置为table-cell。 不过，这可能会给您带来更多麻烦。

http://jsfiddle.net/fXxV3/3/

Answer 3

问题：

您的.flex-text 是一个非浮动块元素，因此默认情况下它会填充其父元素的宽度。在这种情况下，max-width 表示如果您的父母较大，则采用 max-width，如果您的父母小于 min-width，则采用该值。

另一方面，没有设置宽度的浮动块元素将缩小到其内容的大小。

解决方案：

你基本上必须将你的最小/最大宽度移动到一个没有像你一样浮动的外包装 div，然后将内部的 flex-text 浮动在里面，这样背景就只会填充包含文本的区域：

所以你的标记变成：

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

所以你的 css 变成了：

.wrapper{
    min-width: 200px;
    max-width: 400px;
}

.flex-text {
    background: #def;
    float:left;
}

另外，由于您是浮动的 .flex-text，请务必添加一个 clearfix。

DEMO