Troncare il testo con CSS

Mattepuffo's logo
Troncare il testo con CSS

Troncare il testo con CSS

Programmazione, HTML - CSS

line-clamp è una proprietà, abbastanza nuova, di CSS che ci permette di troncare il testo ad una determinata riga.

In sostanza ci permette di ottenere lo stesso risultato che fino ad oggi otteniamo con Javascript o altri linguaggi.

Ad oggi, 22 aprile 2024, dovrebbe essere ancor ai draft; ma potete vedere da Can I use che è compatibile praticamente con tutti i browser.

Detto ciò ecco un esempio:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>TEST</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <style>
      .truncate {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div style="max-width: 50%; margin:0 auto;">
      <p class="truncate">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec diam et ex mattis scelerisque id id nunc.
        Aliquam erat volutpat. Phasellus aliquet, tortor ac gravida scelerisque, elit enim volutpat enim, sed lacinia
        nibh mi ut velit. Maecenas lectus dui, dictum et vulputate eget, interdum eu magna. Suspendisse sagittis nulla
        sem, quis fermentum ex pulvinar in. Pellentesque non viverra felis. Cras eu elit euismod, scelerisque arcu ut,
        rutrum metus. Vivamus tristique nulla eget dui blandit, vitae convallis lectus scelerisque. Praesent bibendum,
        sapien sed porttitor hendrerit, turpis massa tincidunt ante, eu dictum nibh massa in lorem.
      </p>
    </div>
  </body>

</html>

Enjoy!

Condividi

Commentami!