How can I get text-overflow to work in container with dynamic width?

Question

I have a help box component that can contain text and in its natural state is collapsed. Text overflow is hidden using text-overflow: ellipsis; When clicking on it, it expands and displays the whole text.

I cannot get it to work in a dynamically sized container. It works fine otherwise.

Please see the following JSFiddle where the code is reduced to its essentials: https://jsfiddle.net/gmbt76or/

The first helpbox is displayed correctly and is not wider than the display area. The second helpbox is inside the dynamically sized container and is not restricted in its width at all.

Can you please answer me what I have to do to get the second help box to behave like the first one? Naturally I cannot use any fixed widths.

Thank you very much in advance!

the Hutt · Accepted Answer · 2021-11-09 15:30:43Z

2

Adding min-width probably solves the problem:

.ui-g {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    
    min-width: 0px;   /* add ths */
}

.ui-g-12 {
    width: 100%;
    float: left;
    box-sizing: border-box;
    
    min-width:0px;    /* add this */
}

Only two lines to add to your OP code. https://jsfiddle.net/9aq34rt7/
Resize the browser window see it adjusts. Hope this solves the issue in actual code.

found a nice article explaining the issue: https://newbedev.com/css-text-overflow-ellipsis-not-working

edited Nov 9, 2021 at 15:30

answered Nov 9, 2021 at 10:51

the Hutt

18.5k2 gold badges19 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Manuel K Over a year ago

Thank you very much for your answer. That works in the simplified example I posted but not in my real scenario. I guess I simplified too much. It's actually a two-column layout. I have updated the JSFiddle above. Can you please amend your answer? Thank you very much!

Manuel K Over a year ago

Thank you. Using the viewport dimensions means that the components are no longer relative to each other but relative to the viewport size. In a smaller window everything looks different than in a larger window. That's not really acceptable. Are you saying there is no other way to do it?

the Hutt Over a year ago

updated the answer. try resizing window in jsfiddle

Manuel K Over a year ago

Thank you, the min-width solves the problem as well! I was able to set it directly on the fieldset surrounding my help box and it works. I don't understand why, but it works. So thank you very much!

Meher Ullah Khan Raj · Accepted Answer · 2021-11-09 12:02:24Z

1

While viewing your code in JSfiddle, I just modified your .ui-g-12 class css

.ui-g-12 { width: 100%; }

to

.ui-g-12 { width: calc(100vw - 47px); }.

I hope it will fullfill your expectation.

Code: JSFiddle

Thanks.

answered Nov 9, 2021 at 12:02

Meher Ullah Khan Raj

4571 gold badge7 silver badges14 bronze badges

1 Comment

Manuel K Over a year ago

Surprisingly this led me to the correct solution for me in my 2-column layout. Just setting the width of the help box directly (style="width: calc(50vw - 100px)") led to a good result which also stays the same when resizing the window. Thank you!

Collectives™ on Stack Overflow

How can I get text-overflow to work in container with dynamic width?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related