CSS覆蓋的line-height包裹

我有綁定到一個相當狹窄的框鏈接列表;足夠窄的一些鏈接來包裝。CSS覆蓋的line-height包裹

line-height設置爲30px，這對於非包裝鏈接是很好的;但是，對於文本長度足以強制換行的鏈接，此處也會應用30px行高，從而使其看起來好像有2個鏈接，而不僅僅是鏈接文本的延續。

我想以某種方式（不用js或中間件結尾calc'ing字符串長度）以獲得包裝的鏈接文本具有10px左右的行高，以給予延續而不是分離的視覺印象。

2012-03-12 virtualeyes

Line-height僞元素應該設置間距在行之間（特別是當它們包裝時）。您可能要查找的是對li對象。如果設置了line-height到要當行迴繞，並設置margin到要在項目之間的值中的較小值，你要善於去。

看看這個你想要做什麼：

li { 
    padding: 10px 0 0 0; 
    margin: 30px 0; 
    line-height: 10px; 
}

來源

2012-03-12 16:23:06 TLS

不錯，我會給予好評那個。 – thepriebe 2012-03-12 16:28:19

應該得到更多代表這樣的邊緣案例解決方案，但只能標記它回答1X。必須很弱才能恰到好處，但這是「走向」的道路。有趣的是，當保證金是更大的價值時，行高似乎完全被忽略。 – virtualeyes 2012-03-12 16:53:43

感謝您的接受！較小的'line-height'被忽略，因爲'margin'和'line-height'是「collapsing」值。 'line-height'值基本上在每一行上都有一個垂直邊距。當兩個具有垂直邊距的物體相鄰時，兩個邊距中較小的一個會「摺疊」爲零，只留下較大的值。對不起，但我沒有這個規範的鏈接。 – TLS 2012-03-12 17:08:07

我會做this way

li { 
    list-style-position: inside; 
    margin: 20px; 
} 

ul { 
    width: 200px; 
    border: solid 1px; 
}

或者你也可以設置「一線」像this example

li { 
    padding: 10px 0 0 0; 
    margin: 10px; 
    line-height: 30px; 
} 
li:first-line { 
    margin: 10px; 
    line-height: 10px; 
} 
ul { 
    width: 200px; 
}

來源

2012-03-12 16:07:46 thepriebe

很酷，但沒有骰子，不能得到默認包線高度變化。理想情況下，包裝文本會以5px間距顯示在下方。我會繼續擺弄... – virtualeyes 2012-03-12 16:24:58

當然。如果你想發佈你的代碼，我很樂意提供幫助。 – thepriebe 2012-03-12 16:26:50

+1雅的一線選擇，我的CSS富是相當薄弱，所以像這樣的掘金酷碰到;-) – virtualeyes 2012-03-12 16:55:07

CSS覆蓋的line-height包裹

回答

相關問題