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

Question

这里有个工作示例（至少在webkit浏览器中），演示了当你缩小浏览器宽度时，溢出和文本溢出如何截断长文本：

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

但是，如果我将那些div包装在一个fieldset中，那么截断就不再发生了。你有什么想法，需要添加什么额外的样式吗？

错误的示例：

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

- skalb

Answer 1

这是由于 fieldset的奇怪行为引起的，解决方法是更改某些CSS属性，因为浏览器将其设置为奇怪的值。例如，此示例还可以使legend被完美地剪裁。在我的Chrome中有效，但您可能需要阅读解决方法以了解如何在其他浏览器中使其工作。

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>

- LB--

---

谢谢您，通过在 fieldset 元素上设置 min-width: 0 和 display: table-cell 分别解决了 Chrome 和 Firefox 中的问题。请参阅答案中“修复”链接。 - Ryan Burney

有趣的是，它在代码片段中运行正常，但在我的网站上精确复制粘贴后却无法正常工作。 - undefined

Answer 2

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

- Joe

---

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