3

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?

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
Fseee
  • 2,476
  • 9
  • 40
  • 63
  • You're fiddle link is not working. It's always better to include the code you are using in the question. Based on https://stackoverflow.com/a/75334286/880619 I suspect your HTML to be invalid or at least weird. – Jasper de Vries Feb 03 '23 at 10:59

2 Answers2

0

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.

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
0

Little modification in above code.

Hope this css work for you:

label 
{
    width: 120px; 
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
}
label input:focus + label 
{
    width: auto;
    min-width: 120px;
}
Developer Ali Usman
  • 857
  • 4
  • 16