0

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.

2. Be centered inside the wrapping div.

The problem I am experiencing is that when I play around with the width of the view, I am getting a large unwanted gap between the text and the div's border, as you can see here: enter image description here

Can you see the large gap on the right? I want it to be as small as the one on the left side.

How can I prevent this gap, and furthermore, how can I make the div center inside the large div to make its size big enough to fit the text inside of it?

Here is my fiddle test: https://jsfiddle.net/gv1xLd8s

My code:

<div class="wrapper">
<div class="divForText">
Text... Text... Text... Text... Text... Text... 
VeryLongWordToCheckTheGapProblemOnLeftAndRightSides
Text...  Text...
</div>
</div>

.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;
}

Hope that my question is understood.

  1. Using "word-break: break-all" is not a solution because I don't want to break words in the middle.

  2. I want to accomplish this using pure HTML and CSS, No JavaScript.

Thanks!

MurugananthamS
  • 2,395
  • 4
  • 20
  • 49
Daniel
  • 11

3 Answers3

0

If you dont have width limit then you can remove the width limit i.e. 50% from the wrapper class. Then the CSS will be 

.wrapper{
  border: 1px solid blue;
  text-align: center;
  overflow: hidden;
  padding: 25px;
}

Hope it will work.Good luck

Mr Freak
  • 216
  • 3
  • 20
  • It's Not working, the gap on the right side is still there as I showed in the picture in my original post. I really don't understand why people don't try to check their solutions before they are posting them here, it takes less than 20 seconds to check it in the fiddle. – Daniel Jan 02 '20 at 09:04
  • i have tested it in the fiddle that u have given. check this https://jsfiddle.net/n1zk809y/ – Mr Freak Jan 03 '20 at 07:57
0

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;
}
<div class="wrapper">
<div class="divForText">
Text... Text... Text... Text... Text... Text... VeryLongWordToCheckTheGapProblemOnLeftAndRightSides Text...  Text...
</div>
</div>
Basil
  • 1,613
  • 12
  • 25
  • It's Not working, the gap on the right side is still there as I showed in the picture in my original post. I really don't understand why people don't try to check their solutions before they are posting them here. It takes less than 20 seconds to check it in the fiddle site. – Daniel Jan 02 '20 at 09:06
0

I am not sure if this could solve your problem.

.wrapper{
border: 1px solid blue;
text-align: center;
padding: 25px;
margin: auto;
width: 77%;
}
.divForText{
border: 1px solid black;
display: inline-block;
text-align: left;
padding: 15px;
}
Moeen Tabrizi
  • 44
  • 7
  • It's Not working, the gap on the right side is still there as I showed in the picture in my original post. I really don't understand why people don't try to check their solutions before they are posting them here. It takes less than 20 seconds to check it in the fiddle site. – Daniel Jan 02 '20 at 09:05
  • I think this is not a good way to treat people who wanna help ya. – Moeen Tabrizi Jan 02 '20 at 11:10
  • It has been tested on my pc. check in this links and try to be kind. https://jsfiddle.net/5bgov0zk/ – Moeen Tabrizi Jan 03 '20 at 08:38