字段集中的溢出和文本溢出

Posted 2023-03-06

【中文标题】字段集中的溢出和文本溢出

【英文标题】：Overflow and Text-overflow within fieldsets

【发布时间】：2011-11-18 02:01:03

【问题描述】：

这是一个工作示例（至少在 webkit 浏览器中），当您缩小浏览器宽度时，溢出和文本溢出会截断长文本：

<div>short</div>
<div style="overflow: hidden; text-overflow:ellipsis;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div>
<div>short</div>
<div>short</div>
<div>short</div>

但是，如果我将这些 div 包装在一个字段集中，则不再发生截断。关于我需要添加的其他样式的任何想法？

破例：

<fieldset>
  <div>short</div>
  <div style="overflow: hidden; text-overflow: ellipsis;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div>
  <div>short</div>
  <div>short</div>
  <div>short</div>
</fieldset>

【参考方案1】：

这是由于weird behavior with fieldsets，而the fix 是为了更改浏览器设置为奇怪值的某些 CSS 属性。例如，这个例子也使legend 很好地被切断了。它适用于我的 Chrome，但您可能需要通读 the fix 以了解如何使其也适用于其他浏览器。

fieldset

    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;

legend

    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

<fieldset><legend>This is due to weird behavior with fieldsets, and the fix is to change certain CSS properties that browsers set to weird values.</legend><span>This is a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line of text that would normally overflow or cause the fieldset to widen and overflow itself.</span></fieldset>

【讨论】：

感谢您的支持 - 在 fieldset 上设置 min-width: 0 和 display: table-cell 分别在 Chrome 和 Firefox 中修复了此问题。请参阅答案中“修复”的链接。

【参考方案2】：

如果您将固定宽度添加到fieldset，它将起作用，例如<fieldset style="width: 500px">。这样就够了吗？百分比宽度似乎不起作用。

【讨论】：

这是我找到的一种解决方法，但理论上应该有一种方法可以在不设置宽度的情况下做到这一点，因为我还需要处理调整大小事件。