Let us consider my text as

Jane Smith active

here is reference how i need, only active word should be in green and this( Jane Smith active ) should be in single line

reference image

what i have tried is

Jane Smith <p style="background-color:green;"> Active</p>

Here is image how i am getting

reference for how i am getting

CodePudding user response：

The p tag is a block element. You have now two opportunities to change the behavoir.

1. Set the p display to inline; Jane Smith <p style="background-color:green; dipslay: inline;"> Active</p>
2. use instead p a span tag. Jane Smith <span style="background-color:green;"> Active</span>

CodePudding user response：

You could change the width of that

element. Or even better just make an other

element for "Active"

CodePudding user response：

Use <span> tag not <p> tag

Jane Smith <span style="background-color:green;"> Active</span>

CodePudding user response：

Jane Smith Active

If you're trying to achieve it all in one line of HTML:

<p>Jane Smith <span style="background-color: blue">Active</span></p>

CodePudding user response：

The p element is a block level element so it will always start on the next line, you should use a span which is an inline element so it will keep the text on the same line.

Even better try using the mark tag that gives text a highlight and you can change the color using "background-color:lime" in the same way you normally would (default is yellow)

<p>Jane Smith is <span style="background-color:lime">Active</span> </p>

Or

<p>Jane Smith is <mark style="background-color:lime">Active</mark> </p>

CodePudding user response：

use <span> instead of <p>

p stands for paragraph and always starts on a new line