text-overflow | Properties | CSS

The text-overflow CSS property specifies rendering when inline content overflows its end line box edge in the inline progression direction of its block container element ("the block") that has overflow other than visible.

Syntax

CSS

text-overflow: value;

JS

object.style.textOverflow = "value";

Values

<'text-overflow'> = clip | ellipsis

clip

Clip inline content that overflows its block container element.

ellipsis

Render an ellipsis character (U+2026) to represent clipped inline content.

Initial

clip

Examples

clip

ellipsis

<!doctype html>
<html>
<head>
    <style>
        p {
            background-color: yellow;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 50%;
        }
    </style>
</head>
<body>
    <p>ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis ellipsis</p>
</body>
</html>

JS

<!doctype html>
<html>
<head>
    <style>
        p {
            background-color: yellow;
            overflow: hidden;
            white-space: nowrap;
            width: 50%;
        }
    </style>
    <script>
        function mouseover(value) {
            document.getElementsByTagName("p")[0].style.textOverflow = value;
        }
    </script>
</head>
<body>
    <input onmouseover="mouseover(value)" type="button" value="clip">
    <input onmouseover="mouseover(value)" type="button" value="ellipsis">
    <p>text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow text-overflow</p>
</body>
</html>

Links

World Wide Web Consortium (W3C)