JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="area">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="area ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</body>
</html>

CSS

html,body{background:#ddd}

.area {
  margin: 10px 0;
  width: 180px;
  background: #fff;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  /* display: -webkit-box; */
  display: -webkit-flexbox;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}