Wrap div based on content inside it

Question

div's width is 100% so there's lot of extra space left at right. I want div to wrap the text inside it i.e. no extra space should be left in the block. How to achieve it?

<div style="border: 1px solid black;">
  Hello there!
</div>

can you describe in detail what you need? – wangdev87 Nov 09 '20 at 10:14 — wangdev87, Nov 09 '20 at 10:14
@WilliamWang Did you got it now? – Mayank Kataria Nov 09 '20 at 10:21 — Mayank Kataria, Nov 09 '20 at 10:21

score 3 · Accepted Answer · answered Nov 09 '20 at 10:22

3

Try display: inline-block:

<div style="border: 1px solid black;display: inline-block">
  Hello there!
</div>

<div style="border: 1px solid black;display: inline-block;border: solid">
  Hello there!
</div>

answered Nov 09 '20 at 10:22

Aadil Mehraj

2,586
1
7
17

Thanks. Can you explain how it worked? – Mayank Kataria Nov 09 '20 at 10:51
1

`div` by default is `block` i.e it will take fullwidth. `inline-block` takes the width of the content as in `button, a, span etc`. You can read more abt it here https://dev.to/shimphillip/inline-vs-inline-block-vs-block-280h – Aadil Mehraj Nov 09 '20 at 12:07

score 1 · Answer 2 · answered Nov 09 '20 at 10:29

You can use display: inline-flex

<div style="border: 1px solid black; display: inline-flex">
  Hello there!
</div>

Also if you are not familiar with flex and what it is used for, I recommend having a look at this https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Good reference to understand the power of using flexbox

score 0 · Answer 3 · answered Nov 09 '20 at 10:22

0

It seems that you want that complete text of div should remain inside your div instead of giving scroll So you can use :

word-wrap: break-word;

answered Nov 09 '20 at 10:22

Rahul Singh

184
6

Wrap div based on content inside it

3 Answers3