Skip to content

Instantly share code, notes, and snippets.

@billyjov

billyjov/css-ellipsis-tuto.md

Created May 8, 2020 16:56
Show Gist options
  • Save billyjov/9f2ce0ec218daf9e57bc844295473a11 to your computer and use it in GitHub Desktop.
Save billyjov/9f2ce0ec218daf9e57bc844295473a11 to your computer and use it in GitHub Desktop.
Download ZIP
Code pour la video sur le css text-overflow: ellipsis
Raw
css-ellipsis-tuto.md

code HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="ellipsis.css" />
  </head>
  <body>
    <div class="container mt-5">
      <div class="card-deck">
        <div class="card">
          <img
            src="https://cache.marieclaire.fr/data/photo/w999_c17/cuisine/44/saucefrancaise.jpg"
            class="card-img-top"
            alt="..."
          />
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">
              This is a wider card with supporting text below as a natural
              lead-in to additional content. This content is a little bit
              longer.
            </p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
        <div class="card">
          <img
            src="https://www.internationalcuisine.com/wp-content/uploads/2015/02/Ivory-coast-attitke-1024x685.jpg"
            class="card-img-top"
            alt="..."
          />
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Similique, modi reiciendis? Laboriosam, quisquam. Assumenda illum
              sit, delectus natus in ullam sed vitae magnam quod soluta? Soluta
              nulla non sunt libero! Lorem ipsum, dolor sit amet consectetur
              adipisicing elit. Fugit, ipsa molestias velit accusamus enim optio
              voluptates accusantium asperiores ratione maiores alias repellat
              doloribus neque! Nemo aspernatur at quo quis molestias. This card
              has supporting text below as a natural lead-in to additional
              content.
            </p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
        <div class="card">
          <img
            src="https://cache.marieclaire.fr/data/photo/w999_c17/cuisine/44/saucefrancaise.jpg"
            class="card-img-top"
            alt="..."
          />
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">
              This is a wider card with supporting text below as a natural
              lead-in to additional content. This card has even longer content
              than the first to show that equal height action.
            </p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

code CSS

.card-text {
   /* methode 1 */
  /* text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; */
    
   /* methode 2 */
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment