Question

I have created a table and there is some text in which column of the row. But in one of the column the text is too big, and it goes in two lines. Instead of that I want to the text to remain in one line, and what ever can not come in a line should not appear, instead show “…” in place of that.

<table class="nav">
                  <tr><th>&nbsp</th></tr>
                  <tr><td id="selected"><a href="javascript:sayHello(3);">Distinguished Techonologist Program</a></td></tr>
                  <tr><td><a href="javascript:sayHello(4);">Mobile Solution</a></</td></tr>
                  <tr><td>HTML5 Canvas</td></tr>
                  <tr><td>Doamin Expertise</td></tr>    

I am talking about the first row, which has text “Distinguished Techonologist Program”, and the width of the table is set to 150px so the entire line does not fits.

and I want to show “Distinguished Techonol… ” instead of the entire data in two lines.

Please help

Thanks
Zeeshan

How can I do this.

Answer 1

white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Magic happens here */

Apply that to your table cells.