How to show one line text in

Question

In my html, I set a table column as 35%. I want to display one line of a text in the <td>, and any characters exceeding the width of column are chop off. I tried using text-overflow:clip. But if there are <br> in the text, it will show multiple lines.

I tested the answers I got. It seems not working. I think the only way is cut the text before display it.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("div .test").css("background-color","yellow");
  $("div .test").css("text-overflow","clip");
  $("div .test").css("white-space","nowrap");
  $(".test br").css("display", "none");
//  $("div .test").css("overflow":"hidden");

});
</script>
</head>
<body>    

<table>
<tr>
<td>testing</td>
<td>
<div style="border:1px solid black;padding:10px;">
<p class="test">This is a paragraph.</p>
<span class="test">Skin or subcutaneous tissue or mucous membrane,repair of wound, other than wound closure at time of surgery, on face or neck,more > 7cm.</span>
</div>
</td>
</tr>
</table>

</body>
</html>

Thank you.

Andrew · Accepted Answer

It sounds like you don't want the text to wrap, but to be chopped off at the edges of the column instead.

Add this to your td to get that effect:

white-space: nowrap;
overflow:hidden;

See: http://jsfiddle.net/3948a/1/

Karthik Chintala · Answer

FIDDLE

td{
white-space:nowrap;
}

white-space:nowrap will be the fix for it. And if your text in td contains <br/> tags we can ignore it by adding display:none.

td br{
    display:none;
}

Hope this helps

How to show one line text in <td>

Tags:

javascript

html

jquery

css

peter

2 Answers

Andrew

Karthik Chintala

Recent Activity

Donate For Us