css - 根据内容宽度将背景颜色应用于宽度

Question

我只想根据所占内容的宽度应用背景色。我使用了以下两个片段。

// this applies for the entire row and not for the text occupied
<p style="padding: 10px; background: #77bb77; color: #fff; border-radius: 10px; text-align:right">
   Text me
</p>

// if text is larger than width of <p> then text wraps to next row
// and it is not applying padding correctly on the second row 
<p style="text-align: right">
  <span style="padding: 10px; background: #77bb77; color: #fff;border-radius: 10px;">
     Text me
  </span>
</p>

请检查 fiddle https://jsfiddle.net/adww60ry/

Answer 1

我认为您正在寻找的是样式 display: inline-block;

https://developer.mozilla.org/en-US/docs/Web/CSS/display