跨度範圍內的文本，從跨度輪廓偏移

我正在構建受美國憲法啓發的「我們人民」網站部分，並且列出了支持我的項目的「簽署者」的名稱。名稱有不同的大小，我試圖讓它們在頁面上很好地顯示。奇怪的是，字體始終與包含名稱的跨度偏移。下面是我有：跨度範圍內的文本，從跨度輪廓偏移

正如你所看到的，名稱重疊，我想避免。我覺得奇怪的是，該文本的跨度外輪廓：

同樣是所有的名字都是如此。這裏是我的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

跨度範圍內的文本，從跨度輪廓偏移

回答

相關問題