我在Nuxt/Vue中開發應用程序，我的文本來自i18n，一些文本中有regex換行符\ n如果我想正確地顯示它，我被迫使用CSS空白:pre-line屬性，但是當我這樣做時，在格式化代碼期間創建的每個enter都會在任何元素之前為我添加額外的行(只有spans可以正常工作),但是在這種情況下，我需要& lth4 & gt元素。

<h4>
  Lorem ipsum sit dolores
</h4>

<h4>Lorem ipsum sit dolores</h4>

有沒有可能從渲染中移除這些額外的空白，并擁有完全有效的空白:行前屬性？

編輯

我知道這行得通(我已經把它加到例子里了): & lth4 & gtLorem Ipsum sit Dolores & lt/H4 & gt；

我不得不使用前置行，因為一些文本來自BE，它們里面有一些斷行

漂亮不允許我在一行中格式化它，我不能禁用漂亮。漂亮地把文本自動轉到新的一行

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

<h4>
  Lorem ipsum sit dolores
</h4>

<h4>Lorem ipsum sit dolores</h4>

解決方案1:您可以像這樣忽略特定標簽:

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

解決方案2:另一個可行的方法(未經測試)。我認為在這種情況下，更漂亮的不會對齊標簽。

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

h4::after {
  content: "This is a title";
}

<h4></h4>

我找到了另一個解決方法。簡單地說，如果你不想禁用beauty，你可以用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>

我最近遇到了一個問題，列表中添加了額外的空白和錨元素...

沒有空白:

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

空白:

<ul>
<li>

  <a>link</a>

  <span>icon</span>

</li>
</ul>

在應用程序中，一個偽選擇器向每個列表元素添加一個項目符號，但是在有額外空白和沒有額外空白的列表之間，項目符號的間距是不一致的。當試圖設計列表內容和項目符號的樣式時，尤其是在文本換行時，這會產生問題。

為了解決這個問題，我將每個li顯示為一個flex對象，空白被刪除，而不需要從實際的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:"\00BB" !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>