我正在寻找一个 HTML/CSS 解决方案来解决我们在构建网站时遇到的问题。 如果需要,我很乐意实现基于 JavaScript 的解决方案,但我更希望它是本地处理的。
我们有内容管理的文本,需要位于指定区域内,但如果超出可用宽度则换行。 文本后面是不透明的背景色。
当文本很短时,由于 float ,容器会折叠到文本的宽度。 当文本很长并且出现换行时,容器会以最大宽度挂出,即使里面的文本已经换行在下面,所以右侧有一小部分背景颜色(对于包装词) 我希望容器折叠到前一个词的边缘,这样当它非常接近时,它不会“看起来”有空间容纳被包裹的词。
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 一词已在下方换行,但橙色容器仍位于最大宽度处,尽管 float 。 如果内容编辑器引入了换行符(例如,根据示例 4,在 vestibulum 和 porttitor 之间),则容器会正确折叠。
我认为发生的事情是容器在文本换行之前增长,而浏览器在换行后不重新计算宽度?
这是暂存站点上的故障图片(在分离到 JSFiddle 之前):
可以看到文字已经换行了,但是容器并没有塌陷,留下了很大的背景色空隙。
注意我们可以通过执行 text-align:justify
来模拟这一点,但是单词之间的间距与网站上的其余文本不一致。
编辑:我看到这个问题可能是重复的。我发誓我在发布之前做了研究!
max-width adjusts to fit text?
CSS Width / Max-Width on Line Wrap?
Wrapping text forces containing element to max-width
Shrink DIV to text that's wrapped to its max-width?
我认为普遍的共识/结论是没有前沿的 CSS 是不可能的,我应该使用 JavaScript 解决方案。
我在我的 JSFiddle 中添加了更多示例:http://jsfiddle.net/nmuot8bm/6/ 包括来自此处的 JavaScript 解决方案:https://stackoverflow.com/a/33246364/647728
最佳答案
用 CSS 是不可能的……这就是内联盒模型的工作方式 JS 示例/解决方案可以在 JSFiddle 上找到
关于html - CSS 文本环绕折叠容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33490394/