Skip to content

Latest commit

 

History

History
66 lines (50 loc) · 1.85 KB

textoverlow-ellipsis-not-working.md

File metadata and controls

66 lines (50 loc) · 1.85 KB
Raw
title description ms.date ms.custom
Text-overlow ellipsis not working in Internet Explorer 11
Describes a display problem in Internet Explorer 11. This issue occurs when you use the text-overlow ellipsis attribute.
04/26/2020
sap:Development and Website Issues

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

[!INCLUDE ]

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...