CODEWITHSUNDEEP
htmlcss
stackuser
stackuser

Reputation: 283

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

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 enter image description here

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

Upvotes: 0

Views: 1930

Answers (2)

Vijay Kumawat
Vijay Kumawat

Reputation: 963

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>

Upvotes: 0

JohnP
JohnP

Reputation: 1309

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.

Upvotes: 1

Related Questions