Question

在我的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>

谢谢。

Answer 1

听起来你不想让文字换行，而是要在列的边缘切掉。

将此添加到td以获得此效果：

white-space: nowrap;
overflow:hidden;

请参阅： http://jsfiddle.net/3948a/1/

Answer 2

<强> FIDDLE

td{
white-space:nowrap;
}

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

td br{
    display:none;
}

希望这有帮助

Answer 3

Check here：max-width应在px中定义

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

Answer 4

您可以尝试使用CSS：

text-overflow: hidden;

Answer 5

您可以尝试使用CSS

为<td>提供最大宽度或最大高度

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

Answer 6

这将是这样的 overflow-X:hidden;

Answer 7

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

这会有所帮助

Answer 8

您可能会在css

中使用以下代码

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

由于

如何显示一行文字

8 个答案: