溢出：隐藏； 文字溢出：省略号； 空白：nowrap; 在fieldset内不工作？
[英]overflow: hidden; text-overflow: ellipsis; white-space: nowrap; not working inside fieldset?
问题描述
I'm having an issue with the use of white-space: nowrap; 
我在使用white-space: nowrap;遇到问题white-space: nowrap; inside a fieldset in both Google Chrome and Firefox (IE behaves as I want). 在Google Chrome和Firefox中的fieldset集中（IE的行为符合我的期望）。
What I would like to happen is that just a single line of text is displayed with any excess being hidden and an elipsis added. 我想发生的是，只显示一行文本，任何多余的部分都被隐藏，并添加了省略号。 This works in all three of the browsers I mention when my div is outside the fieldset but breaks as soon as I move it inside. 当我的div不在fieldset之外时，这在我提到的所有三种浏览器中都有效，但是当我将其移入fieldset时便会中断。
The screenshot below shows both "working" and "not working" cases. 下面的屏幕快照显示了“有效”和“无效”情况。
The bottom div (outside the fieldset ) has the effect that I want of text truncation rather than div expansion. 底部div （在fieldset之外）具有我想要截断而不是div扩展的效果。
Why is this happening and what do I need to do to prevent it? 为什么会发生这种情况，我需要怎么做才能防止这种情况发生？
The HTML related to the screenshot is below. 下面是与屏幕截图相关的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 个解决方案
解决方案1
1 2012-04-17 06:38:35
If I recall correctly,you should use word-wrap: break-word; 如果我没记错的话，应该使用word-wrap: break-word; instead of white-space: nowrap; 而不是white-space: nowrap; i didnt test my code but I am sure it will work check demo http://jsfiddle.net/u3Q3p/1/ 我没有测试我的代码，但我确定它可以正常工作并演示http://jsfiddle.net/u3Q3p/1/
解决方案2
1 2013-02-22 23:33:15
Per another question's answer , the fieldset must have a width set in order for this to work. 对于另一个问题 ，必须为该fieldset集设置一个宽度才能使其正常工作。 By setting the width everything works correctly. 通过设置宽度，一切正常。
See this fiddle to see the difference. 看到这个小提琴 ，看看区别。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.