Question

我想要指定最小宽度（如果内容非常少）和最大宽度（如果内容更多，则隐藏额外内容），而不是定义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.

感谢您的帮助。

Answer 1

你走了！

使用margin:0 auto;你可以集中管理它:)（如果你不想让它居中，只需删除它）

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

Answer 3

使用min和max-width，test元素为我工作。