如何移除嵌套容器中首字下沉后的多余空格

问题描述 #

我用带drop类的<a>、<p>和<span>标签实现首字下沉，段落直接放文本时显示正常，但段落以锚点或带类<span>开头时会出现多余空格。把结束标签>和后续文本紧挨，部分空格会消失但无法完全消除。我想尽量保留标记的缩进格式，且不想把每段诗的首字母单独放进元素里，另外必须在<a>或<span>上加drop类，否则首字母无法被识别。

问题分析 #

出现多余空格的核心原因是：HTML中元素标签之间的换行、缩进会被解析为单个空格字符。当段落以<a>/<span>开头时，标签与内部文本、标签与后续文本之间的缩进/换行都会产生额外空格，而::first-letter伪元素只能选中元素内的第一个字符，无法处理这些前置空格。

解决方案 #

方案1：通过CSS消除空格影响 #

给带drop类的<a>和<span>设置display: inline-block或调整white-space属性，同时修正首字下沉的定位：

/* 修正a.drop和span.drop的空格问题 */
a.drop, span.drop {
  display: inline-block;
  white-space: nowrap; /* 防止内部文本换行 */
}

/* 调整首字下沉的偏移，抵消可能的空格 */
a.drop::first-letter,
span.drop::first-letter {
  font-size: 2em;
  margin-right: 0.1em; /* 微调字符间距，替代多余空格 */
}

/* 给包含drop类的段落设置white-space，避免标签间空格 */
p.drop.verse {
  white-space: pre-line; /* 保留换行但合并连续空格 */
}

方案2：优化HTML结构（最小改动） #

保留缩进格式的同时，在<a>/<span>的结束标签与后续文本之间添加注释，消除空格：

<p class="drop verse">
<span class="drop tooltip">
  Peddlers
   <span class=tooltiptext>
     a zone agent of the <q>Confederacy of Vega</q> in the story <q>Agent of Vega</q>
   </span>
</span><!--
-->who drive their
Mysterious wagons
<br>
...
</p>

注释会忽略标签间的换行和空格，既保留了代码缩进，又不会产生多余空格。

方案3：统一首字下沉逻辑 #

将段落的首字下沉逻辑统一到<p>标签上，即使段落内有嵌套元素，p.drop::first-letter依然能选中段落内的第一个可见字符（前提是嵌套元素没有覆盖首字符）：

p.drop.verse::first-letter {
  font-size: 2em;
  margin-left: -2em;
}

这种方式不需要给<a>/<span>加drop类，只要段落有drop类即可，同时避免嵌套元素带来的空格问题。

完整示例代码 #

<!DOCTYPE HTML>
<html lang=en>
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <TITLE>favorite things</TITLE>
        <META name="KEYWORDS" CONTENT="filk">
        <style>
            p        {
                       left:20%;
                       position:relative;
                       right:-20%;
                       margin-left:2em;
                       width:60%;
                     }

            p.drop   {
                       margin-left:2em;
                     }

            p.drop::first-letter
                     {
                       font-size:2em;
                       margin-left:-2em;
                     }

            /* 修正嵌套元素的空格问题 */
            a.drop, span.drop {
              display: inline-block;
              white-space: nowrap;
            }

            a.drop::first-letter,
            span.drop::first-letter
                     {
                       font-size:2em;
                       margin-right: 0.1em;
                     }

            a.L,div.L,span.L,a.R,div.R,span.R {
                       display:inline;
                       --width:14%;
                       width:var(--width);
                       position:absolute;
                       container-type: inline-size;
                     }

            a.L,div.L,span.L {
                       left:-20%;
                     }

            a.R,div.R,span.R {
                       right:0;
                     }

            h1       {
                       text-align:center;
                       font-size:4em;
                     }

            img.V    {
                       display:block;
                       height:auto;
                       width:100%;
                       margin-top: 10%;
                     }

           /* Tooltip container */
          .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
          }

          /* Tooltip text */
          .tooltip .tooltiptext {
            visibility: hidden;
            width: 20em;
            background-color: #555;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;

            /* Position the tooltip text */
            position: absolute;
            z-index: 1;
            bottom: 102%;
            left: calc(-10em + 50%);

            /* Fade in tooltip */
            opacity: 0;
            transition: opacity 0.3s;
          }

          .L .tooltiptext {
            left: 0;
            text-align: left;
          }

          .R  .tooltiptext {
            left: auto;
            right: 0%;
            text-align: left;
          }

          /* Tooltip arrow */
          .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
            width: 1px;
          }

          .L .tooltiptext::after {
            left: 20cqw;
          }

          .R .tooltiptext::after {
            left: auto;
            right: 20cqw;
          }

          /* Show the tooltip text when you mouse over the tooltip container */
          .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
          }

          .verse     {
            font-size: 2em;
            text-align: center;
            width:60%;
            white-space: pre-line; /* 合并多余空格 */
          }
        </style>
</head>
<BODY LANG="en-US" DIR="LTR">
<H1>My favorite things</H1>

<p>
[Verse  1]
</p>
<p class="drop verse">
Gardening
<a class=tooltip href="https://en.wikipedia.org/wiki/Ungoliant">
   spiders
   <span class=tooltiptext>
     Ungoliant, who took the form of a giant spider and, along with Dark Lord Melkor, destroyed the Two Trees of Valinor
   </span>
</a>
<br>
And swords that are broken
<br>
Words in the Black Speech
<br>
That must not be spoken
<br>
Unfaithful stewards
<br>
 Who don't want their kings
<br>
These are a few of
<br>
My favorite things.
</p>

<p>
[Verse  2]
</p>
<p class="drop verse">
<span class="drop tooltip">
  Peddlers
   <span class=tooltiptext>
     a zone agent of the <q>Confederacy of Vega</q> in the story <q>Agent of Vega</q>
   </span>
</span><!--
-->who drive their
Mysterious wagons
<br>
Petite young ladies
<br>
Who can speak to dragons
<br>
Travelling the Cosmos
<br>
In a
<a class=tooltip href="https://en.wikipedia.org/wiki/The_Ship_Who_Sang">
  ship who sings
  <span class=tooltiptext>
  Helva is an intelligent girl born with a severely disabled body.
  Her society trains people with such disabilities to operate machinery
  via a direct brain link. In Helva's case, she is trained to
  operate a spaceship (<q>brain ship</q>), and became known as
  <q>The Ship Who Sings</q> due to her habit of singing to herself.
  </span>
</a>
<br>
These are a few of
<br>
My favorite things.
</p>

<p>
[Verse  3]
</p>

<p class="drop verse">
<span class="drop tooltip">
      Time traveling bar men
   <span class=tooltiptext>
      <q>&lsquo;&mdash;All You Zombies&mdash;&rsquo;</q> from The Magazine of Fantasy & Science Fiction, March 1959
   </span>
</span><!--
--><br>
<span class=tooltip>
   Who are like no others
   <span class=tooltiptext>
     The protagonist of <q>&lsquo;&mdash;All You Zombies&mdash;&rsquo;</q> is
     a bartender who, with the aid of a time machine and a sex change
     operation, is his own father and own mother.
   </span>
</span>
<br>
Who are their own fathers
<br>
And are their own mothers
<br>
Of all such stories
<br>
Know Heinlein's are kings
<br>
These are a few of
<br>
My favorite things.
</p>


<p>
[Verse  7]
</p>

<p class="drop verse">
<a class="drop tooltip" href="https://en.wikipedia.org/wiki/Kalvan_(Calvin_Morrison)">
  Calvin
  <span class=tooltiptext>
    In Henry Beam Piper's novel <q>Lord Kalvan of Othewhen</q>, Calvin
    Morrison is a Keystone cop who is accidentally taken into and
    stranded in an alternate universe by a paratime transporter: he
    later learns that the region is called the princedom of Hostigos.
    The locals later have trouble with his American name and refer to
    him as Lord Kalvan.
  </span>
</a><!--
-->who knows his
<br>
Military history
<br>
Runs afoul of the great
<br>
Paratime mystery
<br>
The hand of a lovely
<br>
Young princess it brings
<br>
These are a few of
<br>
My favorite things.
</p>

</BODY>
</HTML>

内容的提问来源于stack exchange，提问作者shmuel