Resize dynamically div by text size

Question

I would like to know how to resize the size of a div according to the width of the text, avoiding this wasted space, leaving the div compressed. Example:

Default size

The div should receive a cut such as:

Desired size

Example code:

.linhaCodigo{
  background: #C0C0C0;
  position: relative;
}

<div class="conteudo2">
              <h3>Cap 2 - Title</h3>
              <p align="left"><h4 align="left"><b>Title 2:</b></h4>
                textexttexttexttexttexttexttexttexttexttexttexttext
              </p>
              <div class="linhaCodigo"> print("I like it!")<br>
                <b>Outup:</b><br>
                I like it!
              </div><br>
            </div>

This is an existing post: https://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents — C4mps, Dec 13 '18 at 11:43

score 1 · Accepted Answer · answered Dec 13 '18 at 11:42

1

try this

.myclassDiv{
   display: inline-block;
 }

answered Dec 13 '18 at 11:42

hoover_D

620
4
9

this works, thank you! – Gustavo Henrique Lima Dec 13 '18 at 11:43
you are welcome! can you tag is the correct anwser please? – hoover_D Dec 13 '18 at 11:45
I was just waiting for the 6 minutes haha. – Gustavo Henrique Lima Dec 13 '18 at 11:54

score 0 · Answer 2 · answered Dec 13 '18 at 11:43

0

Change your CSS to this:

.linhaCodigo{
  background: #C0C0C0;
  position: relative;
  display: inline-block;
}

answered Dec 13 '18 at 11:43

Hamzaouiii

438
3
14

Resize dynamically div by text size

2 Answers2