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

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!

CodePudding user response：

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

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

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

I hope it will fullfill your expectation.

Code: JSFiddle

Thanks.

CodePudding user response：

Use vw unit in .ui-g-12:

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

if you loose the padding and margins then both boxes look same.

More info on relative lengths: https://www.w3.org/TR/css-values-3/#relative-lengths

Edit:
Culprit is class .ui-g-12 it's everywhere in fieldset tag. One solution is to override it like this:

.ui-g-6 {
    width: 50%;
    float: left;
    box-sizing: border-box;
}

.ui-g-6 .ui-g-12 {  /*add this after .ui-g-6 rule */
    width: 44vw;    /* change as per padding and margins*/
}

I've added only .ui-g-6 .ui-g-12 rule.
You can check this here https://jsfiddle.net/20kmw7ua/