以固定寬度在表格中顯示文本

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;

您的dd的標記

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