html - 在表格中以固定宽度显示文本

Question

我有一个用户列表，我希望以表格格式显示。我遇到的问题是我只有 30px 的宽度可用，所以我需要将任何超过这个宽度的名称换行。

HTML

<table>
       <tr>
          <td>User ID</td>
          <td style="width:40px;">User's Full Name</td>
       </tr>
       @foreach(var user in @Model)
       {
          <tr>
             <td>@user.Id</td>
             <td style="width:40px;">@user.Name</td>
          </tr>
       }
</table>

CSS

table{
    width:40px;
    background-color: red;
}

任何更长的名称只会迫使宽度增加。

Answer 1

使用这个属性

word-wrap:break-word;

你的 td 标记

<td style="width:40px;word-wrap:break-word;">@user.Name</td>