text-overflow

Description
Syntax
Examples
Links

Description

The text-overflow property for CSS 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

1 · clip

2 · ellipsis

<!doctype html>
<html>
<head>
    <style>
        p
        {
            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>

3 · JS

<!doctype html>
<html>
<head>
    <style>
        p
        {
            overflow: hidden;
            white-space: nowrap;
            width: 50%;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>clip</button>
    <button>ellipsis</button>
    <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>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.textOverflow = myparameter.target.innerHTML;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>