CSS文本包装折叠容器
agr*_*ath 5 html css css3 word-wrap
我正在寻找一个HTML/CSS解决方案来解决我们在我们正在构建的网站上遇到的问题.如果需要,我很乐意实现基于JavaScript的解决方案,但我更喜欢它本地处理.
我们有内容管理文本,它需要位于指定区域内,但如果超出可用宽度则换行.文本后面是不透明度的背景颜色.
当文本很短时,由于浮动,容器会折叠到文本的宽度.当文本很长并且发生换行时,容器会以最大宽度挂出,即使里面的文本已经包裹在下面,所以右侧有一小部分背景颜色(这对于我希望容器折叠到前一个单词的边缘,这样它就不会"看起来像"包裹的单词有空间,当它非常接近时.
HTML
<div>
<p>Crack the Shutters Open Wide for Parkside Paradise</p>
</div>
CSS
body div {
background-color: #AAFF3B;
max-width:80%;
padding:20px;
display:inline-block;
float:left;
}
body p {
display:inline-block;
background-color: #FFAA3B;
position: relative;
float:left;
white-space:pre-line;
clear:left;
}
这是一个JSFiddle:http://jsfiddle.net/nmuot8bm/3/
如果你看第三个例子,你可以在橙色框的右侧看到少量填充,其中字porttitor已经在下面包裹到一个新线但橙色容器仍然处于最大宽度,尽管浮动.如果内容编辑器引入了换行符(例如,根据示例4在前庭和移动器之间),则容器正确地折叠.
我认为正在发生的是容器在文本换行之前增长,浏览器在换行后不会重新计算宽度？
这是我在JSFiddle中显示的测试用例的图片: 
下面是暂存站点上的故障图片(在分离到JSFiddle之前):
您可以看到文本已经包装,但容器没有折叠,留下了很大的背景颜色差距.
nb我们可以通过这样做来模仿,text-align:justify但是这些单词之间的间距与网站上其他文本不一致.
编辑:我看到这个问题可能是重复的.我发誓在发布之前我做过研究!
我认为一般的共识/结论是没有前沿的CSS我不可能使用JavaScript解决方案.
我在我的JSFiddle中添加了一些示例:http://jsfiddle.net/nmuot8bm/6/, 包括此处的JavaScript解决方案:https://stackoverflow.com/a/33246364/647728