Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Display text in 3 lines

    Hi all,

    I have a database table that contains a column of type text and want to list out all the records. Say, the column name is message. It can contain long text or paragraph.

    The challenge is this message have to be shown in only 3 lines and the rest will be hidden but also can be expandable to view all the message.
    I use <table> as a container of my list.

    Is there a way to limit the display up to 3 lines using javascript?
    Please help....


    TIA

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    what about a CSS solution?:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <style type="text/css">
    td{
    width:50&#37;;
    }
    .maxHeight {
    height: 60px;
    overflow:auto;
    }
    
    </style>
    </head>
    <body>
    <table width="400" border="1" cellspacing="1" cellpadding="0">
      <tr>
        <td><div class="maxHeight">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent odio. Ut non elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis euismod sem vel orci. Nulla tortor. Vivamus aliquet congue ante. Cras volutpat ligula at dui. Sed pharetra posuere dolor. Sed sit amet massa. Nunc mattis molestie arcu. Ut commodo nisi ac eros. Fusce id sapien. </div></td>
        <td>Lorem ipsum</td>
      </tr>
    </table></body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As your suggestion, I tested it using css.
    The overflow will display a vertical scroll box inside the div.

    I need it to be displayed like:
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Praesent odio. Ut non elit. Cum sociis natoque penatibus et
    magnis dis parturient montes, nascetur ridiculus... [More]

    And if the user click [More] link, the div will expand to show all the contents.

    Is it possible?

    TIA

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    DHTML style.

    Set a specific font-size, line-height and height in px so that the div only displays 3 lines of your text, then add "overflow: hidden", which will cut off the bottom without a scrollbar.

    This is a tad hackish with the bg color, but see if it works for you:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Example</title>
    <style type="text/css">
    .limited_box
    {
    position: relative;
    font-family: arial,sans-serif;
    width: 400px;
    font-size: 12px;
    line-height: 15px;
    height: 45px;
    overflow: hidden;
    }
    
    .limited_box .show_more
    {
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-color: #ffffff;
    }
    
    .limited_box .show_more span
    {
    color: #0000ff;
    cursor: pointer;
    }
    </style>
    <script type="text/javascript">
    <!--
    function showMore(id,more_element)
    	{
    	more_element.style.display = "none";
    	document.getElementById(id).style.height = "auto";
    	}
    // -->
    </script>
    </head>
    <body>
    
    <div class="limited_box" id="box1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus varius, arcu vel euismod ornare, libero justo gravida nibh, non dignissim purus risus dictum sapien. Nulla facilisi. Fusce eu nisl. Proin ut mi. Nulla pede. Sed rhoncus nibh in tellus. Sed ipsum ipsum, vulputate imperdiet, ultrices vel, pretium vitae, arcu. Mauris luctus orci nec erat. Sed rutrum condimentum felis. Donec fermentum scelerisque libero. Nulla venenatis, nunc eget congue vehicula, nisl sapien volutpat neque, id fringilla quam tellus vitae massa. Quisque dictum nisi ut enim. Nulla turpis massa, pulvinar sed, pellentesque vel, volutpat quis, risus. Donec pellentesque iaculis urna.
    <span class="show_more" onclick="showMore('box1',this)">... <span>[More]</span></span>
    </div>
    
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, this behaviour is exactly what I want.
    However the last letter in 3rd line is not nicely trimmed out.

    Is there a way to handle this?

    Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •