CODEWITHSUNDEEP
htmlcss
user1337940
user1337940

Reputation: 51

overflow: hidden; text-overflow: ellipsis; white-space: nowrap; not working inside fieldset?

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.

Screenshot

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>

Upvotes: 5

Views: 9562

Answers (2)

Kaleb Pederson
Kaleb Pederson

Reputation: 46489

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.

Upvotes: 2

Kamal
Kamal

Reputation: 2180

If I recall correctly,you should use word-wrap: break-word; instead of white-space: nowrap; i didnt test my code but I am sure it will work check demo http://jsfiddle.net/u3Q3p/1/

Upvotes: 1

Related Questions