JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<textarea class="xl" rows="3">Nulla aliquet gravida nunc sit amet ultrices. Vestibulum ultricies mi eget feugiat aliquet
Curabitur placerat tellus vel pulvinar fringilla. Integer dignissim ut sem eget mollis.
Aliquam ac tortor in nunc dapibus blandit. Aliquam vehicula diam quis sem consequat
</textarea>

<textarea rows="4">Nulla aliquet gravida nunc sit amet ultrices. Vestibulum ultricies mi eget feugiat aliquet
Curabitur placerat tellus vel pulvinar fringilla. Integer dignissim ut sem eget mollis.
Aliquam ac tortor in nunc dapibus blandit. Aliquam vehicula diam quis sem consequat
</textarea>

<textarea>Nulla aliquet gravida nunc sit amet ultrices. Vestibulum ultricies mi eget feugiat aliquet
Curabitur placerat tellus vel pulvinar fringilla. Integer dignissim ut sem eget mollis.
Aliquam ac tortor in nunc dapibus blandit. Aliquam vehicula diam quis sem consequat
</textarea>

CSS

textarea {
  box-sizing: border-box;
  display: block;
  width: 400px;
  height: 80px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  
  width: 300px;
  height: 40px;
  border: 1px solid #eee;
  line-height: 20px;
}

textarea[rows="3"] {
  height: 60px;
}

textarea[rows="4"] {
  height: 80px;
}

textarea.xl {
  font-size: 20px;
  line-height: 30px;
  padding: 5px;
}
textarea[rows="3"] {
  height: 100px;
}