How to set text-overflow ellipsis correctly for an input element using css and html?

Question

i want to set text-overflow ellipsis for an input element. i have the code like below,

.wrapper {
    min-width: 0px;
    max-width: 100%;
    padding: 14px 16px;
    line-height: 21px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-height: 49px;
}

.input {
    display: inline-block;
    line-height: 1.5;
    padding: 5px 7px 4px;
    min-height: 20px;
    margin: 0px;
}

<div class="wrapper">
    <input class="input">
</div>

Now the problem with above style is that the ellipsis is shown always when the input is empty like in screenshot

how can i fix this. could someone help me with this? thanks.

JohnP · Accepted Answer · 2021-09-21 11:13:22Z

1

The text you're truncating is presumably in the input field, but you're applying the text_overflow: ellipsis property in the parent wrapper. Given that the input completely fills the wrapper, it's showing the overflow ellipsis because the content (those return characters) overflows the available space.

What you want, though, is for the input to have the text_overflow: ellipsis property, so you need to move this property into the CSS for that element. Be aware, though, that the input would usually scroll when the user types too much content to view, so you'll want to make sure the resultant behaviour is actually what you want.

answered Sep 21, 2021 at 11:13

JohnP

1,3098 silver badges25 bronze badges

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

Comments

Vijay Kumawat · Accepted Answer · 2021-09-21 11:18:23Z

0

You have to add the text-overflow: ellipsis; property on the input itself instead of wrapper

.wrapper {
    min-width: 0px;
    max-width: 100%;
    padding: 14px 16px;
    line-height: 21px;
    position: relative;
    max-height: 49px;
}

.input {
    display: inline-block;
    line-height: 1.5;
    padding: 5px 7px 4px;
    min-height: 20px;
    margin: 0px;
    text-overflow: ellipsis;
}

<div class="wrapper">
    <input class="input">
</div>

answered Sep 21, 2021 at 11:18

Vijay Kumawat

9835 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to set text-overflow ellipsis correctly for an input element using css and html?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related