Unable to create an HTML Div Element that Fits to the text size

Question

I\'m unable to get a div to fit the size of the text inside of it.

I have 2 divs, and I want the inner div to:

1. Fit inside the outer div.

Answer 1

you could use word-break:break all; so your corrected css will be as follow:

.divForText{
  border: 1px solid black;
  display: inline-block;
  text-align: left;
  padding: 15px;
  word-break: break-all;

}

or

.divForText{
  border: 1px solid black;
  display: inline-block;
  text-align: left;
  padding: 15px;
  word-break: break-word;

}

don't forget to mark as answered if it works for you, as for others could help them.

or

use overflow-x:hidden; that should wrap the text in a decent way, with css there is a lot of ways you can wrap your long text, here is also a useful link here is a useful link

.divForText{
  border: 1px solid black;
  display: inline-block;
  text-align: left;
  padding: 15px;
  overflow-x: hidden;
  word-wrap: break-word;  
}