text-overflow

osbo.com | CSS | Properties | text-overflow

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.

text-overflow: value;

object.style.textOverflow = "value";

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

clip

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

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

World Wide Web Consortium (W3C)

Syntax

CSS

JS

Values

Initial

Examples

clip

ellipsis

JS

Links