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

Your issue is happening because of the long word with no-spaces so the browser cannot break it and it's not fitting with the rest of line so it's going to the new line leaving a big space behind.

to solve this issue you can use this css

.divForText{
  ...
  hyphens: auto;
  ...
}

the browser will add a hyphen automatically when it's needed.

.wrapper{
  border: 1px solid blue;
  text-align: center;
  overflow: hidden;
  padding: 25px;
  margin: auto;
  width: 50%;
}

.divForText{
  border: 1px solid black;
  display: inline-block;
  text-align: left;
  padding: 15px;
  hyphens: auto;
}

Text... Text... Text... Text... Text... Text... VeryLongWordToCheckTheGapProblemOnLeftAndRightSides Text...  Text...