css - Css 背景文字颜色空间

Question

我想在我的 div 中的文本上添加背景颜色，但我只想在文本上而不是在空格上使用背景颜色......我怎么能做到这一点。有什么诀窍吗？

<div class="for">Maintenance Reliability Comfor</div>

display: inline-block;
padding: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 5px;
background-color: rgb(98, 206, 38);

http://jsfiddle.net/PfLkD/

Answer 1

您可以尝试使用 jQuery：

$('div').each(function() {

    var words = $(this).text().split(' ');

    $(this).empty().html(function() {

        for (i = 0; i < words.length; i++) {
            if (i == 0) {
                $(this).append('<span>' + words[i] + '</span>');
            } else {
                $(this).append(' <span>' + words[i] + '</span>');
            }
        }

    });

});

此代码<span>在每个单词周围都添加了标签，因此您无需逐个编写。

进而...：.for span {background:red;}

一个工作示例。

Answer 2

有两种方法可以做到这一点，使用span@Fico 告诉你的 ( http://jsfiddle.net/Fico/Hs8KA ) 或使用text-shadow@OneTrickPony ( http://jsfiddle.net/c7fBp/ )

请记住浏览器支持某些版本的 IE 不能很好地处理文本阴影效果。