css 换行符后留白色空格[重复]

cigdeys3  于 2023-10-21  发布在  其他
关注(0)|答案(3)|浏览(124)

此问题已在此处有答案

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是这样的痛苦。。

8zzbczxx

8zzbczxx1#

<div class="wrap">
  <p>
    We weren't able to change your trading or correspondence address.
  </p>
  <br/>
   <p>
     Please try again or come back later.
  </p>
</div>

将元素分隔为不同的段落标签,在它们之间放置换行符,并将样式更改为内联显示,这些组合将消除句子后的额外空间。如果你在段落元素中添加了一个类,使用这个类来定位句子,如果没有,你可以使用这个更新的CSS/选择器:

.wrap > * {
  background: red;
  color: white;
  max-width: 470px;
  display: inline;
}
vngu2lb8

vngu2lb82#

.wrap {
  background: red;
  color: white;
  max-width: 470px;
  width: fit-content; 
}

/* this css for another way */
.wrap p span {
display: block;
}
<div class="wrap">
  <p>
    We weren't able to change your trading or correspondence address. <br> Please try again or come back later.
  </p>
</div>

<div class="wrap">
  <p>
   <span>  We weren't able to change your trading or correspondence address. </span>          <span> Please try again or come back later.</span>   
  </p>
</div>

@edit:如果删除额外的背景颜色,则添加wrap width: fit-content;

up9lanfz

up9lanfz3#

如果我理解你的愿望,你可以改变默认的p元素CSS,它是:

display:block;
unicode-bidi: embed;
margin: 1.12em 0;

并使此inline,然后调整行的高度,以摆脱白色线之间的“线”,然后移动背景到该元素。
注:我添加的边框只是为了显示什么是在哪里。这些都不是解决方案的一部分,只是为了说明这个例子。

body {
  border: solid green 1px;
}

.wrap {
  color: white;
  max-width: 470px;
  font-size: 0;
  border: solid blue 1px;
}

p {
  background: red;
  display: inline;
  font-size: 16px;
  line-height: 1em;
}
<div class="wrap">
  <p>We weren't able to change your trading or correspondence address. Please try again or come back later.</p>
</div>

相关问题