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

Question

我想限制 table 列宽度，不剪裁文本（不换行）。

我在 Whosebug 上遇到了很多线程（抱歉重复），但其中 none 确实提供了直接的解决方案，尽管我认为这是一个相当简单的问题...

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

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

我相信 white-space: nowrap; 和 text-overflow: clip; table 样式宽度 <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

仅修复 header。不是单元格。
使用 CSS 属性 word-wrap 和 word-break

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

Answer 2

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

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

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

How can I constrain column widths without text clipping or wrapping?

html

css

html-table

clipping