此问题已在此处有答案:
Make container shrink-to-fit child elements as they wrap(4个答案)
10天前关闭。
截至8天前,社区正在审查是否重新讨论这个问题。
有什么办法可以去掉换行符后的白色空格吗?如果你只突出显示文本节点,它实际上需要更少的空间,段落试图采取。
.wrap {
background: red;
color: white;
max-width: 470px;
}
<div class="wrap">
<p>
We weren't able to change your trading or correspondence address. Please try again or come back later.
</p>
</div>
示例:https://codepen.io/patryk-ptak/pen/yLGZjqE
@EDIT:我的意思是这个额外的红色空格后添加的分行。
我需要max-width
属性,所以删除它对我来说不是一个选择。
@EDIT2:重要-文本是动态的,所以我无法控制它,它必须在一个单一的p
标签中呈现,我不能在单词之间插入任何标签:)我只能控制父节点,我希望有一些CSS edge-cases
可以以某种方式解决,但似乎不是这样。
此外,我得到的信息,这篇文章被关闭,因为它已经回答了其他地方,它指向我一个完全不同的职位. Stackoverflow是这样的痛苦。。
3条答案
按热度按时间8zzbczxx1#
将元素分隔为不同的段落标签,在它们之间放置换行符,并将样式更改为内联显示,这些组合将消除句子后的额外空间。如果你在段落元素中添加了一个类,使用这个类来定位句子,如果没有,你可以使用这个更新的CSS/选择器:
vngu2lb82#
@edit:如果删除额外的背景颜色,则添加wrap
width: fit-content;
up9lanfz3#
如果我理解你的愿望,你可以改变默认的
p
元素CSS,它是:并使此
inline
,然后调整行的高度,以摆脱白色线之间的“线”,然后移动背景到该元素。注:我添加的边框只是为了显示什么是在哪里。这些都不是解决方案的一部分,只是为了说明这个例子。