宽度，最大宽度不适用于 <td>

Question

如果文本太长，我需要设置最大宽度。我尝试设置“宽度”和“最大宽度”，但没有成功。

现在它看起来与太长的文本。

<tr>
<td class="no-wrap">
<div class="grid-item-margin-left">@Html.DisplayFor(m => checkListItem.StepNumber).</div>
</td>
<td>
@Html.DisplayFor(m => description)
</td>

我的问题出在

<td>
@Html.DisplayFor(m => description)
</td>

我试过这个解决方案：

<td>
<p style="max-width:60ch">@description</p>
</td>

但是第二个屏幕上的结果：

更新： 感谢您的建议！我试过这个

.long-text-trim {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    max-width: 60ch;
}

它有效。 但！我还有另一个问题：当我最小化窗口时，我想更多地修剪文本。如何实现？

Answer 1

效果很好：

.long-text-trim {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    max-width: 20vw;
}