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

2023年12月12日 225次阅读

我在使用白色空间时遇到了问题：nowrap;在谷歌浏览器和Firefox中的一个字段集内(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>

最佳答案 如果我没记错的话,你应该使用自动换行：break-word;而不是白色空间：nowrap;我没有测试我的代码,但我相信它会工作检查演示
http://jsfiddle.net/u3Q3p/1/

点赞