跨度范围内的文本，从跨度轮廓偏移

我正在构建受美国宪法启发的“我们人民”网站部分，并且列出了支持我的项目的“签署者”的名称。名称有不同的大小，我试图让它们在页面上很好地显示。奇怪的是，字体始终与包含名称的跨度偏移。下面是我有：跨度范围内的文本，从跨度轮廓偏移

正如你所看到的，名称重叠，我想避免。我觉得奇怪的是，该文本的跨度外轮廓：

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

任何帮助将非常感谢！

来源

2017-09-16 liammccarty

，是你的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中添加字体大小的：

来源

2017-09-16 03:45:14

不幸的是，这是行不通的。 110％使它看起来差不多; 200％可以防止顶部的重叠，但也会增加底部的间距，以便在名称最大的线条下出现较大的间隙。并且文本仍然偏离了跨度 – liammccarty

设置单个规则似乎也不起作用，出于同样的原因：文本仍然偏移 – liammccarty

我以'110'为例，您的字体名称是什么？ –

可以使用

span {line-height: 1.2;}

来源

2017-09-16 11:53:44

我试过了，但它不起作用（与下面的答案相同的问题：超出范围的文本窗口）。 – liammccarty

似乎display: inline-block，然后设置margin-top作品相当好。我认为这是一个黑客解决方案，但它或多或少有用。

来源

2017-09-16 15:34:11 liammccarty

跨度范围内的文本，从跨度轮廓偏移

回答

相关问题