View Full Version : Display text in 3 lines

10-17-2008, 12:00 PM
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....:confused:


10-17-2008, 01:18 PM
what about a CSS solution?:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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">
.maxHeight {
height: 60px;

<table width="400" border="1" cellspacing="1" cellpadding="0">
<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>

10-20-2008, 05:03 AM
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?


10-20-2008, 06:31 AM
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:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
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;
<script type="text/javascript">
function showMore(id,more_element)
more_element.style.display = "none";
document.getElementById(id).style.height = "auto";
// -->

<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>


10-22-2008, 05:00 AM
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?