javascript - How to show one line text in <td>

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=".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.

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.

Share Improve this question edited Jun 5, 2014 at 0:55 asked Jun 4, 2014 at 6:07 peter 1,0493 gold badges16 silver badges24 bronze badges

3 Read this: w3schools.com/cssref/css3_pr_text-overflow.asp – Snake Eyes Commented Jun 4, 2014 at 6:09
1 Define one line of a text – T J Commented Jun 4, 2014 at 6:09
1 demo fiddle will be better to help – Sid Commented Jun 4, 2014 at 6:09

Add a comment |

8 Answers 8

Sorted by: Reset to default 12

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/

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

Check here : max-width should be defined in px

 td {
   max-width: 100px;
   overflow: hidden;
   text-overflow: clip;
   white-space: nowrap;
  }

You can try to use CSS:

text-overflow: hidden;

You can try giving a max width or max height for your <td> using CSS

td {
  border: 1px solid black;
  width: 100px;
  max-width: 100px;
  max-height: 10px;
}

this will be like this overflow-X:hidden;

HTML

Try to define the td width in pixel :

<table border=1 style="width:300px">
   <td style="max-width:100px">This is one line <br> text with out br
   </td>
   <td style="width:65%;">Another td
   </td>
</table>

CSS

td{
    white-space:nowrap;
    overflow: hidden;
}

td br{
    display:none;
}

It will help

you might be use below code in your css

.demo{
  word-wrap:break-word;
  overflow:hidden;
}

Thanks

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to show one line text in <td> - Stack Overflow

8 Answers 8

与本文相关的文章

评论列表(0)