CSS：背景颜色到文本大小 [英] CSS: Background color to text size

问题描述

图片比一千个字更好，这里是我的文字尝试实现：

>

这是我实现的

我不想以编程方式做，我想背景适应文本（因为它可能是动态的）

有没有使用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; 
} 
  

我真的不明白工作原理，

解决方案

您需要将背景颜色应用于内联元素。如果文本在块元素中，则需要将文本包装在块元素的内联子元素中（假设在块元素上放置 display：inline 是不可行的） ）。如果您无法编辑HTML，则必须在脚本中进行。

I'm would like to color the background of a text but only to it's size.

Images are better than a thousand words, here is what I'm trying to achieve:

And this is what I am achieving

I don't want to do this programmatically, I would like the background to adapt to the text ( because it may be dynamic )

Is there anyway to do this without using javascript?

Update (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;
}

Update (Solved, based on @BoldClock answer):

.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;
}

I don't really understand how clear works, but is required to achieve the results on the image.

解决方案

You need to apply the background color to an inline element. If the text is in a block element, you need to wrap the text in an inline child of the block element (assuming it's not feasible to put display: inline on the block element). And if you can't edit the HTML, you will have to do it within a script.

这篇关于CSS：背景颜色到文本大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！