Menu
I'm having an issue with the use of white-space: nowrap; inside a fieldset in both Google Chrome and Firefox (IE behaves as I want).
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.
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.
Why is this happening and what do I need to do to prevent it?
The HTML related to the screenshot is below.
<!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>
839
Per another question's answer, the fieldset must have a width set in order for this to work. By setting the width everything works correctly.
See this fiddle to see the difference.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
