display multiline text, and add ellipses if overflow

Hi experts,
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
         john doe

case2; firstname: john, lastname: doeirst1345678912
    Here lastname should start at 2nd line(since name will not fit on 1 line)
        john
        doeirst1345678912

case3; firstname: john, lastname: doeirst1345667899012
    Here lastname starts on 2nd line, and should show ellipses(since longer than width)
        john
        doeirst1345667899012...


case4; firstname: john12345678901223456178, lastname: doe
    Here firstname is longer that line width, so it should continue to next line
        john1234567890122345
        6178  doe


case5; firstname: john1234567890122345, lastname: doeirst1345667890
    Here firstname should continue to 2nd line, and lastname should show
    ellipses(since longer than width)
        john1234567890122345
        6178  doeirst13456678...


Thanks
bunker1234Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
I'm more familiar with knockoutjs than angular but what code have you got so far?
0
Steve BinkCommented:
Take a look at the following pages.  The first is the standard one-line truncation, but the second gives some potential solutions for multi-line as well.

http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
http://html5hub.com/ellipse-my-text/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
bunker1234Author Commented:
Hello,
This is what I tried so far.  case1/2/3 are working fine.  But case 4 and five are showing ellipses in the firstname (first line).  Firstname should continue on 2nd line (without truncation or ellipse).

<!DOCTYPE html>
<html >

<head>
    <style>
        p.test {
            width: 140px;
            height: 40px;
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: lime;
        }
        p{
            margin-top:2px
        }

        p.notWorking{
            background-color: red;
        }

    </style>

</head>

<body>
Case 1 <p    class="test" title='this should show ellipse instead of 3rd line'> firstname  lastname</p>
Case 2 <p    class="test" title='this should show ellipse instead of 3rd line'> firstname  lastnamelastname</p>
Case 3 <p    class="test" title='this should show ellipse instead of 3rd line'> firstname  lastnamelastnamelastnamelastname</p>


Case 4-not working- there should be no ellipse on first line
    <p   class="test notWorking" title='this should show ellipse instead of 3rd line'> firstnamefirstnamefirstname  lastname</p>
Case 5 -not working- there should be no ellipse on first line
    <p   class="test notWorking" title='this should show ellipse instead of 3rd line'> firstnamefirstnamefirstnamefirstname  lastnamelastnamelastnamelastnamelastname</p>


</body>
<script>

</script>
</html>

Thanks
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

bunker1234Author Commented:
Sorry, please ignore tooltips(titles) in my solution.   case 1/2/3 are working fine.

case4 :  firstname should continues on 2nd line  (something like  shown below)
    firstnamefirstnamefirs
    tname lastname


case5 : firstname should continues on 2nd line  (something like  shown below), and
,  lastname  should show ellipses)
    firstnamefirstnamefirs
    tname lastnamelast...
0
Steve BinkCommented:
Here is another example of a pure CSS solution:  http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

If that doesn't work for you, I'm afraid Javascript will be part of the solution.
0
bunker1234Author Commented:
Hello Experts,
I have found a solution.  Please close this question.

Just one comment-- I did all the googling before I posted my question here,  and was hoping to get somewhat real solution from experts instead of  just  google links.  

Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.