跨度之外的文本，从跨度轮廓偏移答案

【问题标题】：Text outside of span, offset from span outline跨度之外的文本，从跨度轮廓偏移
【发布时间】：2017-09-17 12:13:16
【问题描述】：

我正在建立一个受美国宪法启发的“我们人民”网站部分，并列出支持我的项目的“签名者”的姓名。这些名称有不同的大小，我试图让它们很好地显示在页面上。奇怪的是，字体始终从包含名称的跨度偏移。这是我所拥有的：

如您所见，名称重叠，我想避免这种情况。我觉得奇怪的是文本超出了跨度轮廓：

所有的名字都是一样的。这是我的 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;
    }

任何帮助将不胜感激！

【问题讨论】：

标签： html css layout fonts

【解决方案1】：

它是你的line-height，因为它们是内联元素而不是块元素，请尝试修改值：

.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 中添加字体大小并且它不重叠：

【讨论】：

不幸的是，这不起作用。 110% 让它看起来差不多； 200% 可以防止顶部的重叠，但它也会增加底部的间距，因此在名称最大的线下方会出现很大的间隙。并且文本仍然从跨度偏移
设置单个规则似乎也不起作用，原因相同：文本仍然偏移
我以110为例，你的字体叫什么名字？
这是一个名为 Californya 的网络字体套件：myfonts.com/fonts/typo5/californya
我添加了一张图片，我尝试搜索免费版本（类似）字体来制作示例，但没有成功。

【解决方案2】：

你可以使用

span {line-height: 1.2;}

【讨论】：

我试过了，但它不起作用（与下面的答案相同的问题：跨度外的文本窗台）。

【解决方案3】：

似乎display: inline-block 然后设置margin-top 效果很好。我认为这有点像 hack 解决方案，但它或多或少是有效的。

【讨论】：