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>

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

如果您向fieldset添加固定宽度，例如<fieldset style="width: 500px">，则会有效。那就够了吗？百分比宽度似乎不起作用。

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

2 个答案: