CSS技巧：解决带顶置数字的字母序列复制空格问题

我来帮你搞定这个问题——你遇到的空格问题主要来自两个方面：一是inline-block元素之间默认存在的空白字符（HTML里的换行/空格会被解析为空白），二是原本放数字的<p>标签虽然被设置为不可选中，但它所在的容器依然在文档流中占据了位置，复制时会留下空白占位。

下面是针对你的需求优化后的方案，既保留数字在字母上方的布局，又能让复制结果是连续的字母：

优化后的代码示例 #

<div style="margin-bottom: 0px; font-size: 0; /* 消除inline-block元素间的默认空白 */">
  <!-- 带数字1的字母T -->
  <div style="display: inline-block; width: 1.3vw; position: relative; text-align: center;">
    <!-- 绝对定位的数字，脱离文档流不影响复制 -->
    <span style="
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #ededed;
      font-size: 0.6vw;
      padding-top: 2px;
      height: 0.6vw;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    ">1</span>
    <span style="
      background-color: hsl(60,100%,60%);
      width: 1.3vw;
      font-size: 0.8vw;
      display: inline-block;
      text-align: center;
      padding-top: calc(0.6vw + 2px); /* 留出数字的高度空间 */
    ">T</span>
  </div>

  <!-- 带数字2的字母Q -->
  <div style="display: inline-block; width: 1.3vw; position: relative; text-align: center;">
    <span style="
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #ededed;
      font-size: 0.6vw;
      padding-top: 2px;
      height: 0.6vw;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    ">2</span>
    <span style="
      background-color: hsl(60,100%,60%);
      width: 1.3vw;
      font-size: 0.8vw;
      display: inline-block;
      text-align: center;
      padding-top: calc(0.6vw + 2px);
    ">Q</span>
  </div>

  <!-- 无数字的字母D -->
  <div style="display: inline-block; width: 1.3vw; position: relative; text-align: center;">
    <span style="
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #ededed;
      font-size: 0.6vw;
      padding-top: 2px;
      height: 0.6vw;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    "></span>
    <span style="
      background-color: hsl(60,100%,60%);
      width: 1.3vw;
      font-size: 0.8vw;
      display: inline-block;
      text-align: center;
      padding-top: calc(0.6vw + 2px);
    ">D</span>
  </div>
</div>

关键优化点说明 #

1. 消除inline-block空白：给最外层容器设置font-size: 0，可以清除inline-block元素之间的默认空白字符，避免复制时出现空格。
2. 数字脱离文档流：用position: absolute把数字元素定位到字母上方，让它不再占据文档流空间，复制时不会留下占位空白。
3. 保留布局完整性：字母元素的padding-top用calc(0.6vw + 2px)计算，刚好留出数字的高度，保证整体布局和原来一致。
4. 维持不可选中属性：数字元素依然保留user-select: none相关属性，防止用户意外选中数字。

这样修改后，你复制这段内容时，得到的结果就是连续的TQD，完全符合你的需求。

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