Javascript 如何设置跨度背景颜色，以便像在 div 中一样为整行背景着色（显示：块；不是一个选项）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2015667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set span background-color so it colors the background throughout the line like in div (display: block; not an option)
提问by Michael Andersen
I need to style some text within a pre-element. For that, I use an inline span-element like this:
我需要在预元素中设置一些文本的样式。为此，我使用了这样的内联跨度元素：
<pre>
some text <span style="background-color:#ddd;">and some text
with a different background</span> and some more text
</pre>
Then the html is rendered, the span-elements background is only changed underneath the text.
然后呈现 html，span-elements 背景仅在文本下方更改。
Is it somehow possible to make the background-color extend throughout the line without changing display to block or inline-block.
是否有可能使背景颜色延伸到整行而不将显示更改为块或内联块。
Or is there a way to achieve this with javascript?
或者有没有办法用javascript实现这一点？
回答by tmpvar
you can achieve this by formatting your text in a different way. I have achieved what I believe you are looking for with the following:
您可以通过以不同方式格式化文本来实现此目的。我已经实现了我相信您正在寻找的以下内容：
<pre>
some text<span style="background-color:#ddd;">
and some text
with a different background</span>
and some more text
</pre>
回答by Rich Adams
The span element is inline, so it just changes the background for where you've placed it. Since it's also within a <pre>tag, if you want it to change the background for whitespace around the text too, then you can include that whitespace within the span.
span 元素是内联的，因此它只会更改您放置它的位置的背景。由于它也在<pre>标签内，如果您希望它也更改文本周围空白的背景，那么您可以在跨度内包含该空白。
For example, this would make the background change for some whitespace at the end of each line as well as behind the text (but only because of the preis the whitespace is taken into account, without the pre the whitespace would be ignored as normal.)
例如，这将使每行末尾以及文本后面的某些空白的背景发生变化（但仅因为pre考虑了空白，没有 pre 空白将被正常忽略。）
<pre>
some text
<span style="background-color:#ddd;">and some text <br/>
with a different background </span>
and some more text
</pre>
What is preventing you from using a block element? It would be much better to either make the span display as a block element rather than inline when it's in this specific part or just use a block element to begin with, rather than a span. For example,
是什么阻止您使用块元素？当它在这个特定部分时，最好让 span 显示为块元素而不是内联，或者只使用块元素开始，而不是跨度。例如，
<html>
<head>
<style>
pre span { display: block; }
</style>
</head>
<body>
<pre>
some text
<span style="background-color:#ddd;">and some text<br/>
with a different background</span>
and some more text
</pre>
</body>
</html>
回答by Mic
You can try to work in reverse mode, it has more markups but it does what you want.
你可以尝试在反向模式下工作，它有更多的标记，但它可以做你想要的。
<pre>
<div style="background-color:#ddd;float:left"><span style="background-color:#fff">some text</span>and some text
with a different background <span style="background-color:#fff">and some more text</span>
</div>
</pre>
回答by easement
span is an inline element. You will need a block level element in order to fill the entire width. Inline versus block
span 是一个内联元素。您将需要一个块级元素来填充整个宽度。 内联与块
