Question

A very simple task in hand.. but my browser is laughing on my face with my futile attempts.

How do I style a div class just around the text

So I am using jinja on backend and my html looks like this

<div class="content">
<pre>  {{contents}}</pre>
</div>

and my css is

div.content {
    background-color: #add8e6;

}

But what is happening is.. if “content” is half the line.. this styling is running across the whole horizontal line..
I just want to gracefully wrap the color across the text rather than whole horizontal page.
When I try

display: inline; 

all the background color vanishes.

Answer 1

Use display:inline-block

div.content {
    background-color: #add8e6;
    display:inline-block

}

DEMO

Difference between inline and inline-block

inline-block – This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

inline – This value causes an element to generate one or more inline boxes.