我正在寻找一个HTML/CSS的解决方案,以解决我们在建站过程中遇到的问题。如果需要,我可以使用基于JavaScript的解决方案,但最好是使用本地处理的方式。
我们有一些文本需要放置在指定区域内,但是如果超过可用宽度,则需要自动换行。在文本背后是带透明度的背景颜色。
当文本很短时,由于浮动,容器会折叠为文本的宽度。 当文本很长并且出现换行时,容器会以最大宽度悬停,即使其中的文本已经在下面换行,因此右侧会出现一小部分背景颜色(这对于换行的单词来说并不足够)。 我希望容器能够折叠到前一个单词的边缘,这样它就不会“看起来像”为换行的单词腾出了空间,而实际上这个空间非常接近。 HTML
以下是JSFiddle链接:http://jsfiddle.net/nmuot8bm/3/ 如果您查看第三个示例,您会发现橙色框右侧有一小段填充,因为单词“porttitor”换行到新行下面,但橙色容器仍然处于最大宽度,尽管使用了float属性。如果内容编辑器引入了换行符(例如在示例4中的“vestibulum”和“porttitor”之间),则容器将正确折叠。
我认为正在发生的是文本换行前容器会增长,而浏览器在换行后不会重新计算宽度?
这是JSFiddle中我的测试用例的图片:
这是故障的站点分离出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://dev59.com/cVwX5IYBdhLWcg3w6S8h#33246364
我们有一些文本需要放置在指定区域内,但是如果超过可用宽度,则需要自动换行。在文本背后是带透明度的背景颜色。
当文本很短时,由于浮动,容器会折叠为文本的宽度。 当文本很长并且出现换行时,容器会以最大宽度悬停,即使其中的文本已经在下面换行,因此右侧会出现一小部分背景颜色(这对于换行的单词来说并不足够)。 我希望容器能够折叠到前一个单词的边缘,这样它就不会“看起来像”为换行的单词腾出了空间,而实际上这个空间非常接近。 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中我的测试用例的图片:
![enter image description here](https://istack.dev59.com/RmqMj.webp)
![example 2](https://istack.dev59.com/OqZFP.webp)
请注意:“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://dev59.com/cVwX5IYBdhLWcg3w6S8h#33246364