重疊行/包裝CSS

我想要在文本中標記單詞的CSS效果。我第一次嘗試看起來很不錯，直到我有某種自動換行的：重疊行/包裝CSS

<html><body> 
<p> aaa 
    <span style="background-color:#ff8080;border-radius:8px;padding-top:8px;padding-bottom:8px"> 
    bbb 
    <span style="background-color:#80ff80; border-radius:8px;padding-top:4px;padding-bottom:4px"> 
     ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc 
    </span> 
    ddd  
    <span style="background-color:#8080ff; border-radius:8px;padding-top:4px;padding-bottom:4px"> 
     eee 
    </span> 
    </span> 
    fff 
</p> 
</body></html>

任何想法如何得到正確的行高？

非常感謝您的每一個提示！

來源

2017-03-03 Christian

你試過設置css屬性'line-height'嗎？ https://www.w3schools.com/cssref/pr_dim_line-height.asp – DavidVollmers

對不起，我忘了告訴：是的，我嘗試了行高作爲解決方案。但有時我有兩個以上的圖層，我正在尋找一個通用的解決方案。每增加一層，我都需要更大的行高。 – Christian

我明白你的問題是什麼。我猜這些圖層是以編程方式生成的，你應該知道你有多高來計算行高：'line-height：（20 + numberOfLayers * 5）px' – DavidVollmers

因此，與筆者討論這個問題後，我有這樣的想法你的問題的解決方法：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>Demo</title> 
 
</head> 
 

 
<body> 
 
<p> aaa 
 
    <span style="background-color:rgba(255, 0, 0, 0.2);border-radius:8px;padding: 0 4px;"> 
 
    bbb 
 
    <span style="background-color:rgba(0, 255, 0, 0.2); border-radius:8px;padding: 0 4px;"> 
 
     ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc 
 
    </span> 
 
    ddd  
 
    <span style="background-color:rgba(0, 0, 255, 0.2); border-radius:8px;padding: 0 4px;"> 
 
     eee 
 
    </span> 
 
    </span> 
 
    fff 
 
</p> 
 
</body> 
 

 
</html>

你使用透明顏色，所以你不需要頂部/機器人填充這是你的問題。

來源

2017-03-03 15:28:44 DavidVollmers

這是我第一次嘗試（只是沒有透明度）。但我想看到周圍標記的周圍顏色在頂部和底部。但無論如何，我會使用簡單的解決方案（line-height：（20 + numberOfLayers * 5）px），所以我會將您的答案標記爲正確答案。非常感謝你！ – Christian

我分隔你的代碼到CSS：您可以簡單地使用line-height: 50px;

.style1 { 
 
    line-height: 50px; 
 
    background-color:#ff8080; 
 
    border-radius:8px; 
 
    padding-top:8px; 
 
    padding-bottom:8px 
 
} 
 

 
.style2 { 
 
    line-height: 50px; 
 
    background-color:#80ff80; 
 
    border-radius:8px; 
 
    padding-top:4px; 
 
    padding-bottom:4px 
 
} 
 

 
.style3 { 
 
    line-height: 50px; 
 
    background-color:#8080ff; 
 
    border-radius:8px; 
 
    padding-top:4px; 
 
    padding-bottom:4px 
 
}

<p> aaa 
 
    <span class="style1"> 
 
    bbb 
 
    <span class="style2"> 
 
     ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc 
 
    </span> 
 
    ddd  
 
    <span class="style3"> 
 
     eee 
 
    </span> 
 
    </span> 
 
    fff 
 
</p>

問候

來源

2017-03-03 13:41:28

增加line-height在開幕p標記，例如像

<p style="line-height: 200%;"> ....

（嘗試不同的值，看看有什麼最適合）

來源

2017-03-03 13:59:46 Johannes

重疊行/包裝CSS

回答

相關問題