收缩包装div到一些文本是非常简单的.但是如果由于最大宽度(作为示例)文本换行到第二行(或更多行),那么DIV的大小不会缩小到新包装的文本.它仍然扩展到断点(在这种情况下为最大宽度值),在DIV的右侧产生相当大的余量.当想要使这个DIV居中以使包裹的文本看起来居中时,这是有问题的.它不会,因为DIV不会收缩到多行文本.一种解决方案是使用合理的文本,但这并不总是实用的,并且结果可能是可怕的,并且单词之间存在较大的间隙.
据我所知,没有解决方案可以将DIV缩小为纯CSS中的包装文本.所以我的问题是,如何用Javascript实现这一目标？
这个jsfiddle说明了它:jsfiddle.由于最大宽度,这两个词几乎没有换行,但是DIV不会缩小到新包装的文本,留下一个令人讨厌的右边缘.我想消除这一点并让DIV重新调整到包装文本大概使用Javascript(因为我不相信纯CSS中存在解决方案).
.shrunken {text-align: left; display: inline-block; font-size: 24px; background-color: #ddd; max-width: 130px;}
<div class="shrunken">Shrink Shrink</div>