[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

display multiline text, and add ellipses if overflow

Posted on 2014-08-21
6
Medium Priority
?
2,150 Views
Last Modified: 2014-09-10
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
0
Comment
Question by:bunker1234
  • 3
  • 2
6 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 40278829
I'm more familiar with knockoutjs than angular but what code have you got so far?
0
 
LVL 51

Accepted Solution

by:
Steve Bink earned 2000 total points
ID: 40279033
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
 

Author Comment

by:bunker1234
ID: 40284268
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:bunker1234
ID: 40284287
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
 
LVL 51

Expert Comment

by:Steve Bink
ID: 40284447
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
 

Author Comment

by:bunker1234
ID: 40305196
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question