How to avoid unnecessary spacing from the resizable text container?

Question

Is it possible to achieve the resizeable div without spacing from the right side base on the characters through pure CSS? When I change the text alignment to justify, the blank space gone but weird spacing come between the words. In the following image, I want to achieve something like the "output required" column. Please advice and thanks in advance!

CSS:

body{font-family: arial; font-size: 13px;}
.text-holder{
  position: absolute;
  right: 10px;
  max-width: 200px;
  border: 1px solid black;
  text-align: left;
}
.one{
  top: 10px;
}
.two{
  top: 60px;
}
.three{
  top: 110px;
}

<div class="text-holder one">Lorem ipsum dolor sit amet, consectetur</div>
<div class="text-holder two">Duis aute irure dolor in repd in voluptate velit</div>
<div class="text-holder three">Excepteur sint occaecat cupidatated non proident</div>

the duplicate deals with inline-block but the same apply to float, position:absolute, etc (all are shrink to fit elements) — Temani Afif, Dec 20 '20 at 08:18
@TemaniAfif - I tried adding inline-block and float but the issue is still the same :( — Awais Imran, Dec 20 '20 at 09:03
as I said, you cannot solve this issue, read the duplicate to understand why. This is not possible using CSS — Temani Afif, Dec 20 '20 at 09:07

score 0 · Answer 1 · answered Dec 20 '20 at 08:16

That space is occurring because the word in the next line is longer than the space given to write the word. You can clearly see that 'consectetur' in the first line doesn't have space to continue in this line. My advice is that you don't fix the size of the box, keep the width in auto or some other way where it can adapt to the text written. Since the word has no space inside the box, it defaults to a line break but if the textbox was flexible to increase it's width when the word is longer, then you wont get the extra space. Don't fix the value of max-width to 200, probably create a min-width value and change the max-width to something longer.

body{font-family: arial; font-size: 13px;}
.text-holder{
  position: absolute;
  right: 10px;
  min-width: 200px;
  max-width: 1000px;
  border: 1px solid black;
  text-align: left;
}
.one{
  top: 10px;
}
.two{
  top: 60px;
}
.three{
  top: 110px;
}

And then :

    <div class="text-holder one">Lorem ipsum dolor sit amet, consectetur</div>
    <div class="text-holder two">Duis aute irure dolor in repd in voluptate velit</div>
    <div class="text-holder three">Excepteur sint occaecat cupidatated non proident</div>

How to avoid unnecessary spacing from the resizable text container?

1 Answers1