最小宽度，最大宽度css使用最小宽度 [英] Min-width, max-width css use smallest width

问题描述

好吧，所以我希望做的是创建一个DIV，它将根据其中的内容自动调整大小，但它应该使用尽可能小的宽度。我不知道如何做到这一点。

Alright, so what I'm hoping to do is to create a DIV that will autosize based on the content that's in it, but it should use the smallest width possible. I haven't a clue as to how to do this.

所以，如果我有一个DIV标签有3个字符，这是毫无疑问在200px宽，我想要的是div是200px然后。如果有更多的文本，我想让它自动调整大小，以便文本将适合。

So, if I have a DIV tag that has 3 characters which is no doubt under 200px wide, what I want is for the div to be 200px then. If there's a lot more text I would like it to auto size up so that the text will fit.

**只有*** CSS *？****可以这样吗？

**Is this possible with just ***CSS*?****

** UPDATE **

让我看看我能否解释这个更好。我有一个DIV：

Let me see if I can explain this better. I have a DIV:

+++++++++++++++++++++++++++++++++
|-------------------------------|
|-----text this longer text-----|
|-------------------------------|
+++++++++++++++++++++++++++++++++

我希望发生的是如果文本被改变，它将仍然是至少200px宽。像这样：

What I am hoping to have happen is if the text is changed it will still be at least 200px wide. Like this:

+++++++++++++++++++++++++++++++++
|-------------------------------|
|-------------text--------------|
|-------------------------------|
+++++++++++++++++++++++++++++++++

但是如果它是更长的文本，那么第一个例子将继续向外扩展超过200px宽：

But if it was even longer text then the first example it would continue to expand outward past 200px wide:

++++++++++++++++++++++++++++++++++++++++++++++++++++++
|----------------------------------------------------|
|-----text this longer texttext this longer text-----|
|----------------------------------------------------|
++++++++++++++++++++++++++++++++++++++++++++++++++++++

但是，我有一个限制它可以去，所以我需要把它的最大宽度。

However, I do have a limit (limited amount of space) that it can go so I need to put a maximum width to it. Does that make sense or do I need to clarify things more?

推荐答案

问题是，由于< ; div> 是块级元素，它们不会自动调整大小以适合其内容，尽管它们的宽度可以显式定义。 < span> 的内置元素会自动调整大小以适合其内容，但不接受通过 CSS 定义其宽度。解决方法是让您的< div> 表现得像表格单元格。示例如下：

The issue is that since <div>s are block-level elements, they do not auto-resize to fit their content, although their width can be explicitly defined. Inline elements like <span> do auto-size to fit their content, but they don't accept defining their width through CSS. The workaround is to make your <div> behave somehow like a table cell. Here's an example:

CSS：

.widthlim {
    min-width: 200px;
    max-width: 1000px;
    background-color: red; /*This is just for us to be able to see the width*/
    display: table-cell;
    word-wrap: break-word;
    word-break: break-word;
}

HTML：

Example 1:<br/>
<div class = "widthlim">
Hello
</div>
Example 2:<br/>
<div class = "widthlim">
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
Example 3:<br/>
<div class = "widthlim">
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</div>

（注意我们如何添加< br / code>之前的< div> s，因为它们不再完全是块级别）。

当渲染时：

这似乎适用于Firefox，Chrome，和IE8（对于IE8，您需要指定DOCTYPE）。我希望有所帮助！

(Note how we had to add <br/>s before the <div>s because they're no longer completely block-level).
Here's how that looks when rendered: This seems to work on Firefox, Chrome, and IE8 (for IE8 you need to specify a DOCTYPE). I hope that helped!

这篇关于最小宽度，最大宽度css使用最小宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！