CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Ninja
Ninja

Reputation: 211

How to show ellipsis in text box using angularjs?

I am using a form with 5 text boxes. For each text box i fixed the maxlength="100" and binding the value with ng-model. Now i need to show the content inside the text boxes with "..." if the content exceeds 20 characters. Now if the user :hover the input then hide the ellipsis. To make to feel that can be edited. And if the user the click inside the text box, of course can edit the content.

Upvotes: 1

Views: 1517

Answers (1)

rnrneverdies
rnrneverdies

Reputation: 15627

Now i need to show the content inside the text box with "..." on hover if the content exceeds 20 characters.And if the user the click inside the text box they can edit the content.

Just Use CSS

input[type="text"] {
    text-overflow: ellipsis;
}

input[type="text"]:hover {
    text-overflow: initial;
}

HTML

<input id="value" type="text" size="20">

note: size="20" here defines the limit to show before ellipsis.

http://jsfiddle.net/rnrlabs/2pm19ugm/

Upvotes: 1

Related Questions