14

您是否有在多行文本上添加“背景颜色”属性的想法，有两个困难：

  • 背景必须在每行的最后一个单词之后停止
  • 没有背景的每行之间没有空格

例子 ：

在此处输入图像描述

谢谢 ！

4

7 回答 7

19

我想这就是你要找的东西：http: //jsfiddle.net/9BTYQ/1/

span {
    color: white;
    background-color: #343132;
    box-shadow: 0.5em 0 0 #343132,-0.5em 0 0 #343132;
}

div {
    width: 100px;
}
<div>
    <span>Do you have an idea to add a background-color property on a multi-line text, with two difficulties:</span>
</div>

于 2012-10-03T13:21:31.340 回答
10

@gabitzish 所示的box-shadow解决方案在 IE11 和 FF34+（09-2014 发布）中停止正常工作。

您也可以添加box-decoration-break:clone;使其在 IE11 和 FF34+ 中工作：

p {
    display: inline;
    padding: 0.5em 0em;
    background-color: #FFAA3B;
    box-shadow: 1em 0 0 #FFAA3B, -1em 0 0 #FFAA3B;
    box-decoration-break: clone;
}

可在具有适当前缀的 Webkit、Firefox、IE9+ 中使用。

演示：http: //jsfiddle.net/cLh0onv3/1/

注意：已经在别处说明了这一点。

于 2014-11-09T13:47:25.203 回答
5

我发现这个解决方案可以很好地结合 box-shadow 方法和<p>元素周围的<span>元素上的一些相应填充

p {
  display:block;
  padding:0 10px;
  font-size:2em;
}

span {
  color: white;
  background:#333;
  box-shadow: 0 0 0 10px #222;
  padding:0;
  line-height:1.5;
}

http://jsfiddle.net/tsoligo/mMg4B/

于 2013-09-05T22:25:24.693 回答
3

只需将显示框类型更改为内联：

p {
  display: inline;
}


body {
  width: 170px;
}
p {
  display: inline;
  background: black;
  color: white;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

如果每行之间有空格，则设置font-size等于line-height​​ ，或 vv

于 2014-11-09T16:24:11.297 回答
1

使用纯 CSS 使其完美是困难的，并且只有在某些条件下才能实现。例如，如果您使用中断并将行高设置为大，您会看到两者之间的间隙。那么两侧的填充物呢？

此外，您将需要跨度，这只会使您的标记变得丑陋。

幸运的是 Sam Croft 想出了一个简单的 jQuery 插件来解决这个问题。它快速、轻便并且在大多数情况下都可以工作。

文章：http ://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/

演示：http ://samcroft.co.uk/demos/inline-backgrounds/

来源：https ://github.com/samcroft/css-inline-backgrounds/blob/master/inline-backgrounds.js

于 2012-10-03T13:27:36.920 回答
0

<span>这是和<p>标签之间的区别之一。

<span style="background:black; color:white;">
Lorem Ipsum is simply dummy text of the<br>
printing and typesetting industry.<br>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
<br> when an unknown printer took a galley of type
<br> and scrambled it to make a type specimen book.</span>
于 2012-10-03T13:22:18.157 回答
0

这个box-shadow例子很好用：

HTML

<p class="title step-1">
    <span class="highlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, qui suscipit error quasi tempore magni sit nostrum aliquam soluta vel. Dolorem, reprehenderit sint molestiae in est perspiciatis quas accusantium commodi. </span>
</p>

CSS

.title {
  font: 20px/1.25 Ubuntu, sans-serif;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 45px;
  display: inline-block;
  width: 300px;
}
.title .highlight {
  display: inline;
  background: #ee4035;
  color: white;
  padding: 0.5rem;
  padding-left: 0;
  padding-right: 0;
}
.title.step-1 .highlight {
  box-shadow: 10px 0 0 #ee4035, -10px 0 0 #ee4035;
}

JSFiddle：http: //jsfiddle.net/verber/WmRT3/

PS 但不是在 IE8 中...

于 2014-05-08T09:54:57.387 回答