How to truncate long string with ellipsis using CSS

mhmadesk

Save to bookmark

2022-05-17

608

Very Easy

How to truncate long string with ellipsis using CSS

Css programming,

All Answers

mhmadesk

2022-05-17

need an explanation for this answer? contact us directly to get an explanation for this 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 Ellipsis Using CSS</title>
<style>
    p {
        width: 400px;
        padding: 10px;
        background: #f0e68c;
        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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

How to truncate long string with ellipsis using CSS

All Answers

Use the CSS text-overflow property

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now