Min width before ellipsis

[ChenXiu]

I have a <div style="text-overflow:ellipsis"> right next to a <textarea>.
As expected, both the div and textarea shrink simultaneously as I shrink my browser.

Question: How do I "hold off" ellipsises from occuring until the textarea reaches minimum width?
Question (reworded): Let the Textarea shrink a bit first, before ellipsises start to occur.

Instead of this:

-------------------   The quick brown fox.
|                             |   Jumped over the dog.
-------------------

-----------------   The quick brown fo . .
|                          |   Jumped over the do .
-----------------

I would like this:

-------------------   The quick brown fox.
|                             |   Jumped over the dog.
-------------------

----------------   The quick brown fox.
|                        |   Jumped over the dog.
----------------

-----------   The quick bro . . . . .
|                |   Jumped over t. . . . .
-----------

Is this possible?

Thank you!!

 

[requinix]

The ellipses will show when the rendered box is too small to fit the text. If it's applying one when you think it shouldn't then that likely means the text is rendering longer than you think and/or the available space for the text is shorter than you think.

[ChenXiu]

Thanks, but, yes, I know.
So is there a way to "trigger" the textarea to start to shrink first... and THEN the ellipsis div will shrink?
(I thought my 'illustration' clarified that.)

[kicken]

You can accomplish this by using flexbox.

<div class="container">
  <textarea></textarea>
  <div>
    The quick brown fox <br>
    jumped over the lazy dog
  </div>
</div>

CSS

.container {
  display: flex;
  height: 100px;
  border: 1px solid red;
}

textarea {
  flex-grow: 1;
  flex-basis: 300px;
}

.container > div {
  flex-basis: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

 

[ChenXiu]

9 hours ago, kicken said:

You can accomplish this by using flexbox.

Your idea sounded very interesting so I tried it, but it didn't work at all.
I made the text part longer (I made the brown fox actually jump over the dog 😃 )
But when I shrank the browser, they both shrank at the same time (the <textarea> shrank while the ellipsis were appearing).
I'll tinker with it -- at the very least I've learned something new.
Thank you.

[kicken]

1 hour ago, ChenXiu said:

Your idea sounded very interesting so I tried it, but it didn't work at all.

I dunno, works for me.  Added a min-width compared to above because otherwise I couldn't shrink the browser enough.  Tried in Firefox and Chrome.  The textarea shrinks until it hits the minimum width, then the text shrinks and starts showing the ellipsis.

[ChenXiu]

8 hours ago, kicken said:

works for me. 

Ah yes! Now it works -- thank you!!
It appears that by having a "flex-basis" / "min-width" pair of equal value gives the desired result.
This is the first time I've seen an actual solution to this issue I've been trying to fix for about for 2+ years.
About a year ago, I had 3 different "CSS experts" trying to solve this, and none of them could!
I'm going to do a lot of experimenting with it today, just to make sure it really works 😃
Thank you again!!