Hiển thị dấu ... khi nội dung quá dài

Khi bạn muốn cho tiêu đề hoặc một đoạn văn bản được hiển thị trên một dòng, nhưng nội dung lại quá dài và mong muốn chúng được cắt bớt đi và thay bằng dấu 3 chấm, thì bạn có thể áp dụng đoạn code dưới đây:

Đoạn code áp dụng cho 1 dòng

• HTML
• CSS
• Kết quả

• <div class="box">
  	<p class="text">Một chiếc mèo thích làm blog. Blog của Mèo là nơi chia sẻ các thủ thuật khi tạo Blogspot, cách tạo một giao diện blog đẹp, viết nội dung chuẩn SEO, ... và một số thủ thuật về code web.</p>
  </div>
  

• .text{
  	overflow: hidden; /*Ẩn bớt nội dung*/
      white-space: nowrap;
      text-overflow: ellipsis; /*thêm 3 dấu chấm ở cuối*/
  }
  

• Một chiếc mèo thích làm blog. Blog của Mèo là nơi chia sẻ các thủ thuật khi tạo Blogspot, cách tạo một giao diện blog đẹp, viết nội dung chuẩn SEO, ... và một số thủ thuật về code web.

Đoạn code áp dụng cho nhiều dòng

(Khi bạn muốn nội dung được hiển thị khoản 3 - 4 dòng rồi mới cắt)

• HTML
• CSS
• Kết quả

• <div class="box">
  	<p class="text-2">Một chiếc mèo thích làm blog. Blog của Mèo là nơi chia sẻ các thủ thuật khi tạo Blogspot, cách tạo một giao diện blog đẹp, viết nội dung chuẩn SEO, ... và một số thủ thuật về code web.</p>
  </div>
  

• .text-2{
  	text-overflow: ellipsis; /*thêm 3 dấu chấm ở cuối*/
  	overflow: hidden; /*Ẩn bớt nội dung*/
  	display: -webkit-box;
   	-webkit-line-clamp: 2;
   	-webkit-box-orient: vertical;
  }
  

• Một chiếc mèo thích làm blog. Blog của Mèo là nơi chia sẻ các thủ thuật khi tạo Blogspot, cách tạo một giao diện blog đẹp, viết nội dung chuẩn SEO, ... và một số thủ thuật về code web.

Còn đây là đoạn code của class "box". Mình tách ra, vì không muốn mọi người nhầm lẫn với code giúp cắt nội dung và hiển thị dấu ... . 

.box {
   width: 350px;
   padding: 1em 2em;
   border: 5px solid;
   border-image-slice: 1;
   border-width: 3px;
   border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}