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

Posted 2023-03-23

【中文标题】如何在不裁剪或换行的情况下限制列宽？

【英文标题】：How can I constrain column widths without text clipping or wrapping?

【发布时间】：2021-01-12 04:20:43

【问题描述】：

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

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

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

我真的不想在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;" : "";

感谢您的任何见解！

【参考方案1】：

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

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

【讨论】：

好的，谢谢。我刚刚更新了我最终实施的问题。看来我需要限制正文和标题中的列宽。我使用辅助方法来覆盖 CSS 文件中的默认 max-width。似乎工作:-)

【参考方案2】：

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

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

【讨论】：

谢谢，但我并没有真正对应我正在寻找的内容，因为它仍然显示所有文本（在几行中......）也许，如果我限制行高仍然可以？ ?我试图用我错过的overflow: hidden; 来调整我的属性，但仍然必须使用min-width 和max-width。

使用文本溢出：省略号