CSS - 设置最小和最大宽度答案

【问题标题】：CSS - Setting minimum and maximum widthCSS - 设置最小和最大宽度
【发布时间】：2017-02-28 15:21:32
【问题描述】：

我想指定一个最小宽度（如果内容非常少）和最大宽度（如果内容更多，隐藏多余的内容），而不是定义一个固定的 div 宽度。

比如我的html是：

<div class="container">
    <div class="test">x</div>
</div>

CSS：

.container{
    padding:10px; 
    border:1px solid red; 
    width:200px; 
    text-align:center;
}

.test{
    border:1px solid green; 
}

如您所见，容器的固定宽度为 200px。我想将测试 div 放在容器的中心。由于测试类中只有一个字母，所以我希望测试类应该最小为 50px，但最大为 100px。

我尝试了最小宽度和最大宽度，但无法使其工作。这是jsfiddle link.

感谢您的帮助。

【问题讨论】：

标签： html css

【解决方案1】：

给你！

通过使用margin:0 auto;，您可以将其集中化:)（如果您不希望它居中，只需将其删除）

【讨论】：

谢谢，但 min-width 在示例中并没有真正起作用。我想这样做，如果测试中的内容非常不像 1 个字符，那么最小宽度应该是 50px。如果内容更多且不适合，则测试 div 的宽度应增加但不应超过 100px。希望你明白我的意思。
好的，如果是这样（如果我理解正确：P）那么你不需要最小宽度，只需设置宽度，然后显示：块。我已经更新了这个例子jsfiddle.net/SnhhK/5

【解决方案2】：

问题在于<div> 是块级元素，不会自动调整大小以适应其内容。你可以做的是，让你的 div 表现得像 table-cell 那样具有调整大小的能力，并将 min-width 和 max-width 设置为它。

.test {
min-width: 200px;
max-width:1000px;
display: table-cell;
word-wrap: break-word;
word-break: break-all;
}

【讨论】：

【解决方案3】：

在 ,test 元素上使用 min 和 max-width 对我有用。

【讨论】：