Question

我在Google Chrome和Firefox中white-space: nowrap;内使用fieldset时遇到问题（IE的行为符合我的要求）。

我想要发生的是，只显示一行文字，隐藏任何多余文本并添加省略号。这可以在我div位于fieldset之外时提到的所有三个浏览器中使用，但一旦我将其移入内部就会中断。

下面的屏幕截图显示了“工作”和“不工作”的情况。

Screenshot http://img837.imageshack.us/img837/9673/cssp.png

底部div（fieldset之外）具有我想要文本截断而不是div扩展的效果。

为什么会发生这种情况，我需要做些什么来阻止它？

与截图相关的HTML如下所示。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body style="background-color: #ccc;">
    <form action="">
    <div id="outer" style="background-color: #fff; width: 50%">
        <fieldset>
            <legend>Foo</legend>
            <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere, elit id
                lobortis ultricies, mi velit dictum libero, pharetra dapibus libero lectus vel nibh.
                Mauris sem dolor, auctor vitae accumsan lacinia, rhoncus non mauris. Morbi ac mi
                eros, eu pretium massa. </div>
        </fieldset>
         <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere, elit id
                lobortis ultricies, mi velit dictum libero, pharetra dapibus libero lectus vel nibh.
                Mauris sem dolor, auctor vitae accumsan lacinia, rhoncus non mauris. Morbi ac mi
                eros, eu pretium massa. </div>
    </div>
    </form>
</body>
</html>

Answer 1

如果我没记错的话，你应该使用word-wrap: break-word;而不是white-space: nowrap;我没有测试我的代码，但我相信它会起作用检查演示http://jsfiddle.net/u3Q3p/1/

Answer 2

每another question's answer，fieldset必须设置宽度才能使其正常工作。通过设置宽度，一切正常。

请参阅this fiddle以了解其中的差异。

溢出：隐藏;文本溢出：省略号;白色空间：nowrap;不在fieldset内工作？

2 个答案: