htmlcssprimengprimeflex

Primeng float label overflow management

Here's a basic fiddle of my issue. Is there any way to achieve a text overflow ellipsis just into the input and a full text when the input is focused like screenshot below?

enter image description here

I tried primeflex related classes but no one seems to achieve my goal.

Applied also below property trying at least to achieve the label to be partially hidden:

overflow-x: hidden;

which correctly hides the overflowing text but unfortunately hides the float label when the input is focused.

Any ideas?

Solution

  • The fiddle is down, so I could not really test with your setup, but this CSS should work:

    .p-float-label label {
    width: 100px; /* width of the input */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.p-float-label input:focus + label {
    width: auto;
}

    So, when the input is not focussed, it is clipped to the width that is set (it should match the width of your input). And when the input is focussed, set the width to auto.

    Tested this on the PrimeNG showcase.