假设我有这个
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
我不知道如何动态地调整div的textContent宽度,以便它很好地适合其文本内容(文本不会包装,也不滚动或截断).
Desired HTML output http://img26.imageshack.us/img26/5851/desiredeffect.gif
我可以使用任何使用CSS和/或JavaScript的解决方案.
解决方法
I wonder how Could I dynamically
resized the div’s width to fit the
text content (without wrapping)?
假设内容适合没有溢出,您可以使用没有宽度集的浮点(CSS 2.1或更高版本中不需要宽度).没有更多的细节,我不能建议在哪里放置它或什么其他属性设置以获得所需的效果(例如,浮动浮动下来的内容,所以把它放在段落的开头).
如果您不关心像IE浏览器这样的旧浏览器的完美效果,可以使用display：table或display：table-cell,并注意表不会溢出：它们伸展.如果你想避免div的溢出,但允许它超过视口,例如,一个水平滚动的电影条,这种拉伸可能是可取的.在这种情况下,altCognito的白空间建议：Nowrap将是非常有用的.