1. Tutorials
  2. Truncate String with Ellipsis using CSS Only Tutorial

Truncate String with Ellipsis using CSS Only Tutorial

Submitted by oretnom23 on Thursday, March 30, 2023 - 11:02.

In this tutorial, you can learn to Truncate Long Text of HTML Element content with Ellipsis using CSS only. The tutorial aims to provide students and self-learners with a reference for learning useful tricks using CSS for building a website. Here, I will be providing a simple web page that demonstrates the way for truncating the long text.

What is a Truncated String?

The Truncated String is textual content that is originally long or has multiple lines and shortens into a specific length. This type of technique is often used for website posts or article list pages whereas the post/article content or description of each item is shortened to prevent long page scroll. It also provides a better user experience and user interactivity.

How to Truncate Long String using CSS?

CSS comes with multiple useful built-in properties to truncate long strings of HTML elements. The following properties of CSS allow us to achieve the truncated string.

  • Overflow Property ( overflow:hidden )
  • Max Height Property ( max-height:300px )
  • Max Width Property ( max-height:300px )
  • Display Property ( display:flex )
  • -webkit-line-clamp Property ( -webkit-line-clamp:3 )
  • -webkit-box-orient Property ( -webkit-box-orient:vertical )
  • Text Overflow Property ( text-overflow:ellipsis )

These CSS Properties can be used for truncating the HTML element string by combining them. The text-overflow property is used for adding an ellipsis after the last text shown in the truncated string to let the user know that the string has a continuation. Check out the web page scripts that I created and provided below to understand more about this.

Sample Web Page

The scripts below result in a simple web application page that contains static contents or paragraphs with long text and is truncated. The whole paragraph content will be shown when the user hovers over the paragraph element.

Page Interface

Here is the HTML file script of the web page named index.html. The script contains the page layout and content HTML elements.

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>HTML and JS - Truncate String</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  11.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  12.     <link rel="stylesheet" href="style.css">
  13.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  14. </head>
  16.     <div class="content-md-lg py-3">
  17.         <div class="col-lg-8 col-md-10 col-sm-12 col-12 mx-auto">
  18.             <div class="page-title">Truncate String using Pure CSS only</div>
  19.             <hr style="margin:auto; width:25px" class="border-light opacity-100">
  20.         </div>
  21.         <div class="container-lg">
  22.             <div class="row py-3 my-5">
  23.                 <div class="col-lg-5 col-md-5 col-sm-10 col-12 mx-auto">
  24.                     <!-- Static Content Wrapper -->
  25.                     <div class="card rounded-0">
  26.                         <div class="card-body rounded-0 py-2">
  27.                             <div class="container-fluid">
  28.                                 <!-- Sample Content with Single Line Truncate -->
  29.                                 <h5 class="fw-bolder">Sample Truncate in Single Line</h5>
  30.                                 <hr>
  31.                                 <!-- Single Line Trucate Paragraph -->
  32.                                 <p id="singleLine" title="Truncate has been removed because the element is hovered">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in eros metus. Vivamus metus urna, egestas eget est eget, auctor dapibus ex.
  33.                                 </p>
  34.                                 <!-- Single Line Trucate Paragraph -->
  35.                                 <!-- Sample Content with Single Line Truncate -->
  36.                                 <br>
  37.                                 <!-- Sample Content with Multiple Line Truncate -->
  38.                                 <h5 class="fw-bolder">Sample Truncate Multiple Line</h5>
  39.                                 <hr>
  40.                                 <!-- Multiple Line Trucate Paragraph -->
  41.                                 <p id="mutipleLine" data-clamp="2" title="Truncate has been removed because the element is hovered">Vestibulum gravida nulla in finibus varius. Vestibulum blandit lectus vel mattis tempus. Vestibulum eu cursus purus, quis venenatis libero. Vivamus elit lectus, viverra non venenatis quis, semper sed dolor. Quisque auctor, purus non commodo posuere, lectus sem sodales est, at ornare ligula massa at justo. Phasellus fringilla dui nec cursus sagittis. Vivamus sed fermentum turpis. Vivamus tincidunt nulla ipsum, vel pellentesque diam consectetur maximus. Pellentesque in turpis vulputate neque porta pellentesque. Sed mattis accumsan suscipit. Aliquam erat volutpat. Aenean quis orci nulla. Ut in eros velit.</p>
  42.                                 <!-- Multiple Line Trucate Paragraph -->
  43.                                 <!-- Sample Content with Multiple Line Truncate -->
  44.                             </div>
  45.                         </div>
  46.                     </div>
  47.                     <!-- Static Content Wrapper -->
  48.                 </div>
  49.             </div>
  50.         </div>
  51.     </div>
  52. </body>
  53. </html>

Custom Stylesheet

The web page contains the following CSS script that designs some of the page elements such as the page layout.

  1. @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200&family=Space+Mono&display=swap" rel="stylesheet');
  2. @import url('https://fonts.googleapis.com/css2?family=Tillana:wght@400;600&display=swap');
  3. :root{
  4.     --space-mono-font: 'Space Mono', monospace;
  5.     --border-dark-subtle: #373838;
  6.     --font-tillana:'Tillana', cursive;
  7. }
  8. *{
  9.     box-sizing: border-box;
  10. }
  11. body *{
  12.     font-family: var(--space-mono-font);
  13. }
  14. /**
  15. Page Design
  16. */
  17. body,
  18. html{
  19.     height: 100%;
  20.     width: 100%;
  21.     margin: 0;
  22.     padding: 0;
  23. }
  24. body{
  25.     background-color: #282A3A;
  26. }
  27. .page-title{
  28.     font-size: 2.5rem;
  29.     font-weight: 500;
  30.     color: #fff;
  31.     letter-spacing: 3px;
  32.     font-family: var(--secular-font);
  33.     text-align: center;
  34.     text-shadow: 0px 0px 3px #2020208c;
  35. }
  36. .border-dark-subtle{
  37.     border-color: var(--border-dark-subtle) !important;
  38. }

Truncating String to Single Line

The following script contains the CSS code that truncates the first paragraph of the web page into a single page.

  1. /* Truncate String or paragraph in single line */
  2. #singleLine{
  3.     max-width: calc(100%);
  4.     white-space: nowrap;
  5.     overflow: hidden;
  6.     text-overflow: ellipsis;
  7.     transition:all .3s ease-in-out;
  8. }
  9. /* Show the single line whole text when hovered  */
  10. #singleLine:hover{
  11.     white-space: unset;
  12.     overflow: auto;
  13.     text-overflow: unset;
  14. }

Truncating String to Multiple Line

Lastly, the following script is the CSS code that truncates the second paragraph into multiple lines.

  1. /* Truncate String or paragraph in multiple line */
  2. #mutipleLine{
  3.     --truncate-line: 3;
  4.     --custom-line-height: 1.3rem;
  5.     line-height: var(--custom-line-height);
  6.     max-height: calc(var(--custom-line-height) * var(--truncate-line));
  7.     overflow: hidden;
  8.     text-overflow: ellipsis;
  9.     display: -webkit-box;
  10.     -webkit-line-clamp:var(--truncate-line);
  11.     -webkit-box-orient: vertical;
  12.     transition:all .3s ease-in-out;
  13. }
  14.  
  15. /* Show the multiple line whole text when hovered  */
  16. #mutipleLine:hover{
  17.     max-height: unset;
  18.     -webkit-line-clamp:unset;
  19. }

Snapshots

Here are the overall result snapshots of the scripts I have provided above.

Page Layout

Truncate String with Ellipsis using CSS

Not Truncated Content

Truncate String with Ellipsis using CSS

Truncated Content

Truncate String with Ellipsis using CSS

DEMO VIDEO

There you go! I have also provided the complete source code zip file of the sample web page that I created and provided for this tutorial on this website. It is free to download. To download it, click the download button located below this tutorial's content. Feel free to download and modify it to do some experiments to improve your programming capabilities.

That's it! I hope this Truncate String with Ellipsis using CSS Only Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags
HTML
css
CSS Tricks
CSS Truncate
Truncate String
String Show less
Truncate String using CSS
CSS Tutorial for Beginners

Comments

Add new comment

About text formats