display multiline text, and add ellipses if overflow
Posted on 2014-08-21
We are using angular, and I need a CSS/jquerylite solution for displaying firstName and lastName.
There are 2 lines to display firstname and lastname. Both first and lastname can have upto 40 characters each.
Below are 5 scenarios, and how name should be displayed.
width:80px, height: 40px.
case1: firstname: john, lastname: doe
Here full name fits on 1 line. It should display name on first line
case2; firstname: john, lastname: doeirst1345678912
Here lastname should start at 2nd line(since name will not fit on 1 line)
case3; firstname: john, lastname: doeirst1345667899012
Here lastname starts on 2nd line, and should show ellipses(since longer than width)
case4; firstname: john12345678901223456178, lastname: doe
Here firstname is longer that line width, so it should continue to next line
case5; firstname: john1234567890122345, lastname: doeirst1345667890
Here firstname should continue to 2nd line, and lastname should show
ellipses(since longer than width)