如何在不裁剪或换行的情况下限制列宽？

Question

我想限制表格列的宽度，不进行文本剪辑（不换行）。

我在 Stackoverflow 上遇到了很多线程（抱歉重复），但没有一个能真正给出直接的解决方案，尽管我认为这是一个相当简单的问题......

首先，我是否必须同时限制标题和内容列的宽度？

我真的不想在th / td 中插入div（反正我还没有找到直接的解决方案）。

我相信white-space: nowrap; 和text-overflow: clip; 表格样式宽度<th style="width: 100px>...</th>（同上td）就足够了，但它不起作用）。它们的 CSS 顺序重要吗？

我不明白为什么像下面这样简单的东西不起作用..

<th style="width: 72px; text-overflow: clip; white-space: nowrap;">ABCDEFGHIJKLMNOPQRSTUVWXY abcdefghijklmnopqrstuvwyz</th><!-- Of course, specified in CSS file -->

并希望看到类似的内容：

----------------
   |ABCDEFG|
----------------

更新

CSS 样式

th {
    max-width: 72px;
    white-space: nowrap;
    text-overflow: clip;
    overflow: hidden;
}

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

剃刀页面

<tH @Html.Raw(Helpers.HTMLTagAttribute(Enums.FieldType.Date))>
...
<td @Html.Raw(Helpers.HTMLTagAttribute(Enums.FieldType.Date))>
...

其中帮助方法HTMLBodyTagStyleAttributes(FieldType fieldType) 使用HTMLWidth(FieldType fieldType) 定义如下，FieldType 是一个相对于每一列的枚举：

private static string HTMLWidth(FieldType fieldType)
{
    string width;

    switch (fieldType)
    {
        case FieldType.Date:
            width = "72px";
            break;
        // ...
        default:
            width = "86px";
            break;
    }

    return width != "" ? $"max-width: {width};" : "";
}

感谢您的任何见解！

Answer 1

尝试添加max-width 和overflow: hidden，例如：

th {
  max-width: 72px;
  text-overflow: clip; 
  white-space: nowrap;
  overflow: hidden;
}

Answer 2

1. 仅修复标题。不是细胞。
2. 使用 CSS 属性 word-wrap 和 word-break

    div {
      word-wrap: break-word;
      word-break: normal;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }