重叠的行/ wordwrapping CSS

时间：2017-03-03 13:36:36

标签： html css text

我想在文本中使用标记词的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>

enter image description here

知道如何获得正确的线高吗？

非常感谢您的每一个提示！

3 个答案:

答案 0 :(得分：1)

我将您的代码分成CSS：您只需使用.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 }

即可

＆＃13;
＆＃13; 
<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>
＆＃13; 
{{1}}
＆＃13;
＆＃13;
＆＃13;

此致

答案 1 :(得分：1)

增加开场line-height代码中的p，例如

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

（尝试不同的值以查看最合适的值）

答案 2 :(得分：1)

因此，在与作者讨论问题后，我有了解决问题的方法：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<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>
＆＃13;
＆＃13;
＆＃13;

你使用透明色，所以你不需要top / bot填充，这是你的问题。

相关问题
最新问题