没有内联填充的内联元素的背景颜色

Question

I want the background-color to wrap exactly around the inline characters. 我希望背景颜色完全包围内联字符。

Can't explain it any better so here's an image showing exactly what I want: 无法解释它，所以这里的图像显示了我想要的东西：

期望的效果

HTML HTML

<div>
  <span>HTML Text block - HTML Text block</span>
</div>

CSS CSS

div {
  max-width: 300px;
  line-height: 1.5;
  text-transform: uppercase;
}

span {
  background-color: white;
  box-shadow: 5px 5px 0 black;
  padding: 0;
}

If it can't be done with CSS alone, can JavaScript be of any help? 如果单靠CSS无法完成，JavaScript可以提供任何帮助吗？

Here's a codepen 这是一个codepen

Answer 1

Try this: 尝试这个：

<!doctype html>
<html>
<head>
  <title>Layout Experiments</title>
  <style>
    *{
      -webkit-box-sizing :border-box;
      -moz-box-sizing    :border-box;
      box-sizing         :border-box;
    }
    div{
      max-width      :300px;
      line-height    :1.5;
      text-transform :uppercase;
      height         :200px;
      background     :wheat;
    }
    span{
      background-color :white;
      box-shadow       :5px 5px 0 black;
      padding          :0;
    }
  </style>
</head>
<body>
<div>
  <span>HTML Text block - HTML Text block HTML Text block - HTML Text block</span>
</div>
</body>
</html>

Answer 2

试试这个：  HTML Text   block   HTML Text   block 

没有内联填充的内联元素的背景颜色

问题描述

2 个解决方案

解决方案1
0 2015-05-22 10:04:24

解决方案2
0 2015-05-22 10:14:38

没有内联填充的内联元素的背景颜色

问题描述

2 个解决方案

解决方案1 0 2015-05-22 10:04:24

解决方案2 0 2015-05-22 10:14:38

解决方案1
0 2015-05-22 10:04:24

解决方案2
0 2015-05-22 10:14:38