logo标签列表

<fieldset> 内的 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 无法工作？

htmlcss
5
我在 Google Chrome 和 Firefox 中使用 white-space: nowrap; 在 fieldset 中遇到了问题（IE 表现正常）。
我希望只显示一行文本，并隐藏多余的部分并添加省略号。当我的 div 在 fieldset 外时，这在我提到的三种浏览器中都能正常工作，但是移动到内部后就无法正常工作。
下面的截图显示了“正常工作”和“不正常工作”的情况。

Screenshot

底部的 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>
2个回答
2
根据另一个问题的答案，fieldset必须设置宽度才能正常工作。通过设置宽度，一切都可以正确地工作。

请参见此示例以查看差异。

嗯，你的代码似乎只是显示了我的错误而没有解决它？但我认为你应该是正确的！ - R Claven
1

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

您的演示fiddle在所有三个浏览器中都将文本换行显示为多行。我只想显示一行文本，并且将该行文本截断在右侧，而不是无限扩展div。 - user1337940
检查代码 - 有多行代码，但除了最后一行外，其他所有行都在具有适当样式的<div>元素之外。这对我有效。 - Stephen Harris
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接