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.

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:

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 HTML code:

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

My CSS code:

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

Thanks!

(Note: I want to accomplish this using pure HTML and CSS)

with javascript only, size changing on diffrents browser an default font — Mister Jojo, Jan 02 '20 at 01:20
It is hard to understand exactly what you are asking. You need to read your question out loud to yourself, and edit it accordingly. — JΛYDΞV, Jan 02 '20 at 01:51
@Aft3rL1f3 I don't understand what is unclear with my question, I also showed you a nice image that demonstrate the problem, did you try to look at it? What is not clear with this picture? — Daniel, Jan 02 '20 at 02:59
@Daniel its edited now and reads much better. And the image does help. — JΛYDΞV, Jan 02 '20 at 15:16
@Daniel, I changed my vote for you. Originally your spelling and grammar was so bad it was unreadable. — JΛYDΞV, Jan 02 '20 at 15:18
@Aft3rL1f3 Thanks man, I didn't know that my English is so Bed :-D — Daniel, Jan 02 '20 at 19:12

Kai · Answer 1 · 2020-01-02T04:39:11.550

2

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

edited Jan 02 '20 at 04:39

answered Jan 02 '20 at 01:42

Kai

185
8

Sorry but that's not the solution that I was looking for. In your solution the words are getting cut in the middle... I didn't want that. – Daniel Jan 02 '20 at 03:02
@Daniel if you do not want to "cut" the words in middle, and don't want the space as well, how exactly are you imagining the solution to work? – Swetank Poddar Jan 02 '20 at 03:10
@Swetank Poddar Here, I want a solution like the following, compare it with the picture in my original post: https://i.ibb.co/hXZ1Jv6/untitled.jpg – Daniel Jan 02 '20 at 03:34
then instead of using ( word-break: break-all ) use ( word-break: break-word ) that should do the trick you are looking for – Kai Jan 02 '20 at 03:44
@Kai When I play around with the width of the view, I am still getting a large unwanted gap between the text and the div's border on the right side. – Daniel Jan 02 '20 at 03:58
I edited the answer adding more options hope that helps. – Kai Jan 02 '20 at 04:40
@Kai Also with your new solution I'm getting a large gap on the right side when playing with the width of the view. Did you try it in the fiddle to see if it's working? – Daniel Jan 02 '20 at 04:51
Based on your text alignment the text will behave like this based on the length of it, and your left and right padding are not going to be equal at all time, the logical solution for it, is to set your text alignment to center, by then it will wrap nicely and your left and right padding will be equal, that is all what you can do with css. – Kai Jan 02 '20 at 14:07
@Kai I tried centering but it's also not the solution I'm looking for. Yes when it's centered the gap is equal in both sides but it's a very large gap and it looks bad. I want the border to be not more than 20 pixels from the text. – Daniel Jan 02 '20 at 19:17
then you need to use the (word-break: break-all;) no other way around what you are looking for, else you need to implement your div size using @keyframe in css and from there adjust your text size and div size based on your view port width, that would need you to create another post in here, good luck – Kai Jan 02 '20 at 20:01

score 0 · Answer 2 · answered Jan 02 '20 at 09:10

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>

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

2 Answers2

Linked

Related