html - 跨度外的文本，从跨度轮廓偏移

Question

我正在构建受美国宪法启发的“We the People”网站部分，并且列出了支持我的元素的“签名者”的姓名。名称有不同的大小，我正试图让它们在页面上很好地显示。奇怪的是，字体始终偏离包含名称的范围。这是我拥有的:

如您所见，名称重叠，我想避免这种情况。我觉得奇怪的是文本在跨度轮廓之外:

所有名字也是如此。这是我的 HTML:

   <div id="names">   
      <span class="order ten CalifornyaA-Bold" id="o3">Eric So</span> &nbsp;
      <span class="order twenty-five CalifornyaB-Bold" id="o5">Sierra Hansen</span> &nbsp;
      <span class="order ten CalifornyaB-Bold" id="o6">Eleanor Collier</span> &nbsp;
      ...
      <span class="order twenty-five CalifornyaC-Bold" id="o69">Maeve McCarty</span> &nbsp;
   </div>

...和 ​​CSS:

    #names {
      text-align: center;
      padding-bottom: 10%;
    }
    .hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten {
      line-height: 1.5em;
      white-space: nowrap;
    }
    .hancock {
      font-size: 5.5em;
    }
    .five-hundred {
      font-size: 4em;
    }
    .two-hundred {
      font-size: 3.4em;
    }
    .one-hundred {
      font-size: 2.8em;
    }
    .fifty {
      font-size: 2.2em;
    }
    .twenty-five {
      font-size: 1.6em;
    }
    .ten {
      font-size: 1em;
    }

非常感谢任何帮助!

Answer 1

它是你的 line-height 因为它们是内联元素并且没有 block 元素，请尝试修改值:

.hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten {
      line-height: 110%;//percent would be good
      white-space: nowrap;
    }

或者为每个添加单独的 CSS 规则，而不是全部设置为1.5em
编辑:
请记住为父元素设置字体大小，因为您正在使用 em，请检查我如何包装文本并在 em 的页面中添加字体大小字体及其不重叠: