Let say I have this HTML code snippet:
假设我有这个HTML代码段:
<div id="container">
<div id="textContent">Text Content Te</div>
<div id="anotherText">Another Text Content</div>
</div>
Original HTML output http://img26.imageshack.us/img26/1571/beforeeffect.gif
原始HTML输出http://img26.imageshack.us/img26/1571/beforeeffect.gif
I wonder how I could dynamically resize the div's textContent width so that it fits its text content nicely (neither the text will be wrapping nor scrolling nor truncated).
我想知道如何动态调整div的textContent宽度,以便它很好地适应它的文本内容(文本既不会包装也不会滚动也不会被截断)。
Desired HTML output http://img26.imageshack.us/img26/5851/desiredeffect.gif
期望的HTML输出http://img26.imageshack.us/img26/5851/desiredeffect.gif
I am open to any solution using CSS and/or JavaScript.
我对使用CSS和/或JavaScript的任何解决方案持开放态度。
2 个解决方案
#1
I wonder how could I dynamically resized the div's width to fit the text content (without wrapping)?
我想知道如何动态调整div的宽度以适应文本内容(不包装)?
Assuming the content would fit without overflowing, you could use a float without a width set (width isn't required in CSS 2.1 or greater). Without more detail, I can't suggest where to put it or what other properties to set to get the desired effect (eg, floats float down around following content, so put it at the beginning of a paragraph).
假设内容适合而没有溢出,您可以使用没有宽度设置的float(CSS 2.1或更高版本中不需要宽度)。没有更多细节,我无法建议将其放置在何处或设置其他属性以获得所需效果(例如,浮动在下面的内容周围浮动,因此将其放在段落的开头)。
If you're not concerned with the effect looking perfect on old browsers like Internet Explorer, you could use display: table or display: table-cell, with the caveat that tables don't overflow: they stretch. That stretching may be desirable if you want to avoid overflow of your div, but allow it to overlow the viewport -- eg, a film strip that scrolls horizontally. In that case, altCognito's suggestion of white-space: nowrap would be very useful.
如果您不关心在Internet Explorer等旧浏览器上看起来完美的效果,您可以使用display:table或display:table-cell,但要注意表格不会溢出:它们会拉伸。如果你想避免你的div溢出,但允许它超过视口 - 例如,水平滚动的电影条,那么这种拉伸可能是理想的。在这种情况下,altCognito建议使用white-space:nowrap非常有用。
#2
<style>
div {
white-space: nowrap;
}
</style>
This will do the trick (though you probably should be more specific about the divs that you want to change. This means the divs that you do use this on won't have any line feeds unless you specify them yourself. But I'm guessing you're using this for labels, so you should be all set.
这可以解决问题(尽管你可能应该更加具体地了解你想要改变的div。这意味着你使用它的div将没有任何换行,除非你自己指定它们。但我猜你将它用于标签,所以你应该全部设置。
看一个例子。
#1
I wonder how could I dynamically resized the div's width to fit the text content (without wrapping)?
我想知道如何动态调整div的宽度以适应文本内容(不包装)?
Assuming the content would fit without overflowing, you could use a float without a width set (width isn't required in CSS 2.1 or greater). Without more detail, I can't suggest where to put it or what other properties to set to get the desired effect (eg, floats float down around following content, so put it at the beginning of a paragraph).
假设内容适合而没有溢出,您可以使用没有宽度设置的float(CSS 2.1或更高版本中不需要宽度)。没有更多细节,我无法建议将其放置在何处或设置其他属性以获得所需效果(例如,浮动在下面的内容周围浮动,因此将其放在段落的开头)。
If you're not concerned with the effect looking perfect on old browsers like Internet Explorer, you could use display: table or display: table-cell, with the caveat that tables don't overflow: they stretch. That stretching may be desirable if you want to avoid overflow of your div, but allow it to overlow the viewport -- eg, a film strip that scrolls horizontally. In that case, altCognito's suggestion of white-space: nowrap would be very useful.
如果您不关心在Internet Explorer等旧浏览器上看起来完美的效果,您可以使用display:table或display:table-cell,但要注意表格不会溢出:它们会拉伸。如果你想避免你的div溢出,但允许它超过视口 - 例如,水平滚动的电影条,那么这种拉伸可能是理想的。在这种情况下,altCognito建议使用white-space:nowrap非常有用。
#2
<style>
div {
white-space: nowrap;
}
</style>
This will do the trick (though you probably should be more specific about the divs that you want to change. This means the divs that you do use this on won't have any line feeds unless you specify them yourself. But I'm guessing you're using this for labels, so you should be all set.
这可以解决问题(尽管你可能应该更加具体地了解你想要改变的div。这意味着你使用它的div将没有任何换行,除非你自己指定它们。但我猜你将它用于标签,所以你应该全部设置。
看一个例子。