如何在<td>中显示一行文本

How to show one line text in <td>

本文关键字：文本 一行 显示 td      更新时间：2023-09-26

在我的html中，我将表格列设置为35%。我想在<td>中显示一行文本，并且任何超过列宽度的字符都将被截断。我试着用text-overflow:clip。但如果文本中有<br>，则会显示多行。

我测试了我得到的答案。这似乎不起作用。我认为唯一的方法是在显示之前剪切文本。

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

谢谢。

这听起来像是你不想让文本换行，而是在列的边缘被截断。

将此添加到您的td以获得此效果:

white-space: nowrap;
overflow:hidden;

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

小提琴 

td{
white-space:nowrap;
}

white-space:nowrap将是修复它。如果你的文本在td中包含<br/>标签，我们可以通过添加display:none来忽略它。

td br{
    display:none;
}

希望能有所帮助

检查这里:max-width应该在px

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

你可以尝试使用CSS:

text-overflow: hidden;

你可以尝试给你的<td>的最大宽度或最大高度使用CSS

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

将是这样的overflow-X:hidden;

HTML

尝试用像素定义td宽度:

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

它会有帮助

你可以使用下面的代码在你的css

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

谢谢

相关文章：