5

我在 Google Chrome 和 Firefox 中使用white-space: nowrap;inside a时遇到问题（IE 的行为如我所愿）。fieldset

我想要发生的是只显示一行文本，隐藏任何多余的文本并添加省略号。这适用于我提到的所有三个浏览器，当我div在外面时，fieldset但一旦我把它移到里面就会中断。

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

截屏

底部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>
4

2 回答 2

1

根据另一个问题的答案，fieldset必须设置宽度才能使其正常工作。通过设置宽度，一切正常。

看看这个小提琴看看有什么不同。

于 2013-02-22T23:33:15.760 回答
1

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

于 2012-04-17T06:38:35.137 回答