Share via

Internet Explorer doesn't handle the text-overlow ellipsis attribute correctly

  • Article

Warning

The retired, out-of-support Internet Explorer 11 desktop application has been permanently disabled through a Microsoft Edge update on certain versions of Windows 10. For more information, see Internet Explorer 11 desktop app retirement FAQ.

This article provides the information to solve the issue that the text-overlow: ellipsis attribute only applies to the first line of an HTML document in Internet Explorer.

Original product version:   Internet Explorer 11
Original KB number:   3056585

Symptoms

When you apply the text-overlow: ellipsis CSS attribute to multiple lines in an HTML document, and then you view the webpage in Internet Explorer, you discover that the attribute has been applied only to the first line.

Cause

This is a known issue in Internet Explorer 10 and Internet Explorer 11.

Resolution

The ellipsis is displayed for both lines when the page is used with document modes Internet Explorer 5 and Internet Explorer 7.

More information

The following sample webpage demonstrates the issue:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div
            {
                width: 100px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <div>
            1111111111111111111111111111111111111111111111111111111111111111
            1111111111111111111111111111111111111111111111111111111111111111
        </div>
    </body>
</html>

In this situation, you see output that resembles the following:

1111111111111...
111111111111111

You expect to see output that resembles the following:

1111111111111...
1111111111111...