Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to truncate long string with ellipsis using CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS text-overflow property

You can use the CSS text-overflow property in combination with the white-space and overflow properties to truncate or clip long text and put the dot-dot or ellipsis (...) at the end to represent the clipped text or indicate the user. Let's check out an example to see how this works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Truncating Long Text with CSS</title>
<style>
    p {
        width: 400px;
        padding: 10px;
        background: #f2f2f2;
        overflow: hidden;
        white-space: nowrap;        
        text-overflow: ellipsis;
    }
</style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ame sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates