CSS:文本大小的背景颜色

Question

我想为文本的背景着色,但仅限于它的大小.

图像胜过千言万语,这就是我想要实现的目标:

这就是我所取得的成就

我不想以编程方式执行此操作,我希望背景能够适应文本(因为它可能是动态的)

反正有没有使用javascript吗？

更新(HTML):

<div class="team-member-teaser-name">OSCAR</div>

CSS

.team-member-teaser-name
{
    color: #4fb4d0;
    background: #135364;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 5px;
    font-size: 10px;
}

更新(已解决,基于@BoldClock答案):

.team-member-teaser-name
{
    color: #4FB4D0;
    background: #135364;
    margin-top: 5px;
    padding-left: 5px;
    font-size: 10px;
    display: inline;
    float: left;
    padding-right: 9px;
    clear: both;
}

我真的不明白它是如何清晰的,但是需要在图像上实现结果.

Answer 1

您需要将背景颜色应用于内联元素.如果文本在块元素中,则需要将文本包装在块元素的内联子元素中(假设放置display: inline块元素是不可行的).如果您无法编辑HTML,则必须在脚本中执行此操作.

Answer 2

您可以将文本包装在这样的范围内:

<p><span class="highlight">OSCAR</span></p>

然后,根据你当前的CSS,你可以这样设计:

.highlight{
    background-color: blue; 
}