如何使用 CSS 或 HTML 消除多余空格的问题?

问题描述 投票:0回答:3

我正在 Nuxt/Vue 中开发应用程序,我的文本来自 i18n,一些文本内部有正则表达式换行符

\n
,如果我想正确显示它,我不得不使用 CSS
white-space: pre-line
属性但是当我这样做是因为在 prettier 格式化代码期间创建的每个输入都会在任何元素之前添加额外的行(只有跨度可以正常工作)但在这种情况下我需要
<h4>
元素。

<h4>
  Lorem ipsum sit dolores
</h4>

<h4>Lorem ipsum sit dolores</h4>

是否有机会从渲染中删除这个额外的空白区域并具有完全可用的

white-space: pre-line
属性?

编辑

  1. 我知道这行得通(我已将其添加到示例中):

<h4>Lorem Ipsum sit Dolores</h4>

  1. 我被迫使用

    pre-line
    因为一些文本来自BE并且它们里面有一些断行

  2. Prettier 不允许我在一行中格式化它,我不能禁用 prettier。 Prettier 自动将文本转发到新行

h4 {
  border: 1px solid goldenrod;
  white-space: pre-line;
}
<h4>
  Lorem ipsum sit dolores
</h4>

<h4>Lorem ipsum sit dolores</h4>

html css prettier
3个回答
1
投票

解决方案 1:您可以让 prettier 忽略 像这样的特定标签:

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

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

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

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


0
投票

我找到了另一个解决方案。简单地说,如果你不想禁用更漂亮,你可以用 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>


0
投票

我最近遇到一个问题,列表中添加了额外的空白,它是锚元素...

没有空白:

<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>

© www.soinside.com 2019 - 2024. All rights reserved.