Check out example codes for "fill color behid text in html". It will help you in understanding the concepts better.

Code Example 1

Option 1
display: table;

no parent required
h1 {
    display: table; /* keep the background color wrapped tight */
    margin: 0px auto 0px auto; /* keep the table centered */
<h1>The Last Will and Testament of Eric Jones</h1>

Code Example 2

Put the text in an inline element, such as a <span>.

<h1><span>The Last Will and Testament of Eric Jones</span></h1>
And then apply the background color on the inline element.

h1 {
    text-align: center; 
h1 span { 
    background-color: green; 
An inline element is as big as its contents is, so that should do it for you.

Learn ReactJs, React Native from