Question

我将td＆＃39; sss wrap-wrap设为break-word。当单词被包裹时，td的高度正在增加。但是我需要将td的高度（当我输入文本）增加到一定限度时，应该隐藏剩余的文本。

超出高度的文本不应该是可见的，但我们可以输入我们需要的文本。有没有办法实现这个场景。

类似于应用换行文本并将单元格合并到excel中的相同单元格。

提前致谢。

＆＃13;

$(function(){
	$('td').attr('contenteditable','true');
});

＆＃13;

table{
border-collapse: collapse;
table-layout:fixed;
width:500px;
}
td{
position:relative;
border: 2px solid black;
-webkit-user-select:none;
width:25%;
height:20px;
overflow:ellipsis;
word-wrap: break-word;
padding:0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

＆＃13;

Answer 1

老实说，你应该只使用div作为你的布局并完全取消桌子。

但是，如果您必须使用表格，因为tds的行为与divs不同，您可以在每个td中插入一个div，如下所示：

＆＃13;

$('td').append('<div class="faux-cell">');
$fauxCells=$('.faux-cell');
$fauxCells.attr('contenteditable', 'true');
$fauxCells.each(function(){
  $this= $(this);
  $this.css('max-width',$this.parent().width());
});
$fauxCells.on('keypress', function(e) {
  var element = this;
  if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) {
    e.stop();
  }
});

＆＃13;

.faux-cell {
  width: 100%;
  max-height: 50px;
}
.red {
  color: #ff0000;
}
table {
  border-collapse: collapse;
  width: 500px;
}
td {
  position: relative;
  border: 2px solid black;
  -webkit-user-select: none;
  width: 25%;
  height: 20px;
  overflow: hidden;
  word-wrap: break-word;
  padding: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

＆＃13;

请注意对overflow:hidden;

的更改

将单词换行到td中的某个限制

1 个答案: