Javascript 如何设置跨度背景色，使其像在div中一样在整行中对背景进行着色（显示：块；不是选项）_Javascript_Html_Css

Javascript 如何设置跨度背景色，使其像在div中一样在整行中对背景进行着色（显示：块；不是选项）

javascript html css

Javascript 如何设置跨度背景色，使其像在div中一样在整行中对背景进行着色（显示：块；不是选项）,javascript,html,css,Javascript,Html,Css,我需要在pre元素中设置一些文本样式。为此，我使用了一个内联span元素，如下所示： <pre> some text <span style="background-color:#ddd;">and some text with a different background</span> and some more text </pre> <pre> some text<span style="backgroun

我需要在pre元素中设置一些文本样式。为此，我使用了一个内联span元素，如下所示：

<pre>
some text <span style="background-color:#ddd;">and some text
with a different background</span> and some more text
</pre>

    <pre>
    some text<span style="background-color:#ddd;">
    and some text
    with a different background</span>
    and some more text
    </pre>


一些文本和一些文本
有不同的背景和更多的文字

然后呈现html，仅在文本下方更改span元素背景

在不将显示更改为块或内联块的情况下，是否有可能使背景色延伸到整个线条

或者有没有办法用javascript实现这一点

span是一个内联元素。您将需要一个块级元素来填充整个宽度。

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>

是什么阻止您使用块元素？如果span位于此特定零件中，则最好将其显示为块元素而不是内联元素，或者只使用块元素而不是span作为开头。比如说,


预span{display:block；}
一些文本
和一些文本

背景不同
还有一些文字

您可以通过以不同的方式格式化文本来实现这一点。我已经通过以下几点实现了我相信您正在寻找的目标：


一些文本
还有一些文字
背景不同
还有一些文字

您可以尝试在反向模式下工作，它有更多的标记，但它可以满足您的需要


一些文本和一些文本
有不同的背景和更多的文字

不是真的，不是（尽管可能是JS）。由于某种原因，

display:block

是问题吗？您的问题有点不清楚。示例文本的哪一部分应该有背景图像？这似乎与编程无关。我会改为问这个问题。原因显示：block；一个问题是，文本和跨度可以从同一行开始。剧组会引入一个不应该出现的断线。嗨@MichaelAndersen。。。我看到你在UofC时仍然是S.O.用户；-）----。你能接受这个问题的答案吗？好的答案排在第一位？（s.O.将这个不完整/不准确的答案排在最前面是愚蠢的，因为这个问题没有

✓被接受的答案。乍一看，人们可能倾向于听取第一个响应的建议，而不是滚动以找到下面更准确的答案。）而不是在safari或firefox中。如果我不够清楚，我很抱歉。背景色必须持续到包含框的末尾。在这种情况下，前置元素的右侧。它不能是块元素的原因是，它会引入换行符，然后跨距开始和结束于与其他元素或其他文本相同的行。对不起，误会了。我更正了这个示例以进行澄清。很好。但它引入了一个问题：第一行中的灰色文本比第二行中的白色文本长。文本结束后，第二行将为灰色。但是对于静态标记，这是可行的。div
在pre中是不允许的，这是不正确的。你不必给整条线的背景上色。另见。
    <pre>
    some text<span style="background-color:#ddd;">
    and some text
    with a different background</span>
    and some more text
    </pre>

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