文章/答案/技术大牛

发布

问重叠行/字包装CSS
EN

Stack Overflow用户

提问于 2017-03-03 13:36:36

回答 3查看 2K关注 0票数 1

我想要一个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>

知道怎么得到正确的线高吗？

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

css

text

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-03-03 15:28:44

所以，在和作者讨论了这个问题之后，我有了一个解决你的问题的办法：

<!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>

你使用透明的颜色，所以你不需要顶部/机器人填充，这是你的问题。

票数 1

Stack Overflow用户

发布于 2017-03-03 13:41:28

我将您的代码分离成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>

问候

票数 2

Stack Overflow用户

发布于 2017-03-03 13:59:46

在打开的line-height标记中增加p，例如

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

(尝试不同的价值观，看看什么最适合)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42580372

复制

相似问题

问重叠行/字包装CSS
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重叠行/字包装CSSEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重叠行/字包装CSS
EN