Question 45638 in CSS Question posted in
Some basic documentation can be found here.

Primeng float label overflow management – CSS

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?

Tags:

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search