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.

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 · Inline

<!doctype html>
<html>
<head>
    <style>
        p
        {
            overflow: hidden;
            white-space: nowrap;
            width: 50%;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">clip</button>
    <button onmouseover="myfunction(innerHTML)">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;
        }
    </script>
</body>
</html>

4 · JS · Internal

<!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;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
        }
    </script>
</body>
</html>