如何使用CSS或HTML删除额外的空白问题?

Question

我正在开发应用程序在nuext/Vue和我的文本来自i18n，一些文本有正则换行在n，如果我想正确显示这个，我被迫使用CSSwhite-space: pre-line属性，但当我这样做时，每一个输入在格式化代码期间由prettier添加我额外的行之前任何元素(只有span工作正常)，但在这种情况下，我需要<h4>元素。

<h4>
Lorem ipsum sit dolores
</h4>
<h4>Lorem ipsum sit dolores</h4>

是否有机会从渲染中删除这个额外的空白，并具有完全工作的white-space: pre-line属性?

编辑

1. 我知道这是有效的(我已经把它添加到例子中):

<h4>Lorem Ipsum sit Dolores</h4>

2. 我被迫使用pre-line，因为有些文本来自BE，它们在

   内部有一些换行符

3. Prettier不允许我在一行中格式化它，我不能禁用Prettier。pretier自动将文本转到新行

h4 {
border: 1px solid goldenrod;
white-space: pre-line;
}

<h4>
Lorem ipsum sit dolores
</h4>
<h4>Lorem ipsum sit dolores</h4>

Answer 1

解决方案1:您可以更漂亮地忽略特定的标签，像这样:

<!-- prettier-ignore -->
<h4>Lorem ipsum sit dolores</h4>

解决方案2:另一种可能有效的方法(未经测试)。我想在这种情况下，pretier不会对齐标签。

h4 {
white-space: pre-line;
border: 1px solid goldenrod;
}
h4::after {
content: "This is a title";
}

<h4></h4>

Answer 2

我找到了另一个解决方案。简单地说，如果你不想禁用pretier，你可以用span来包装你的文本，一切都很完美。

h4 {
border: 1px solid goldenrod;
}
h4 span {
white-space: pre-line;
}

<h4>
<span>Lorem ipsum sit dolores</span>
</h4>
<h4>Lorem ipsum sit dolores</h4>

Answer 3

我最近遇到了一个问题，那里有额外的空白添加到列表和它的锚元素…

无空格:

<ul>
<li><a>link</a><span>icon</span></li>
</ul>

空白:

<ul>
<li>
<a>link</a>
<span>icon</span>
</li>
</ul>

在应用程序中，伪选择器向每个列表元素添加一个项目符号，但是每个列表之间的项目符号间距是不一致的，每个列表有额外的空白和没有额外的空白。当尝试设置列表内容和项目符号的样式时，这会产生一个问题，特别是在文本换行期间。

为了解决这个问题，我将每个li显示为一个伸缩对象，并且无需从实际的HTML中删除空白即可将其删除。注意，你也可以尝试使用display: table;但它只能在Chrome中使用，而不能在Firefox中使用。

ul li {
display: flex;
}

参见代码演示。希望对你有帮助。

ul {
border: 1px solid gray;
list-style: none;
margin: .5em 0;
padding: 1em;
width: 140px;
}
ul li {
margin: 5px 0 5px 15px;
}
ul li::before {
content:"0BB" !important;
margin-left: -12px;
}
ul li a {
color: #006699;
font-size: 1em;
font-weight: 500;
line-height: 1.4em;
text-decoration: underline;
}
ul.removewhitespace li {
display: flex;
width: min-content;
}
ul.removewhitespace li span {
display: flex;
flex: 0 1 100%;
align-self: end;
margin-left: -.1em;
}
.icon-check {
content: "";
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E") no-repeat center 0;
background-size: auto;
background-size: 15px;
display: inline-block;
width: 17px;
height: 17px;
vertical-align: middle;
}

<ul class="removewhitespace">
<li>
&nbsp;
<a href="#">Remove whitespace in this list with flex.</a><span class="icon-check"></span></li>
</ul>
<ul>
<li>
&nbsp;
<a href="#">Leave the whitespace in this list as is.</a><span class="icon-check"></span></li>
</ul>