Ghi chú CSS

nodecss.md

Xử lý text-overflow

Với block-element

element {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; /* text-overflow: clip; */
}

• text-overflow: clip; đoạn văn bản overflow sẽ bị ẩn đi,
• text-overflow: ellipsis; phần bị ẩn đi sẽ được thay thế bằng dấu ‘3 chấm’ ngoài ra bạn còn có thể chỉ định chuỗi thay thế ví dụ text-overflow: "----";tuy nhiên nó chỉ support cho Firefox
• Với line-clamp bạn có thể chỉ định được số dòng muốn hiển thị, phần nội dung vượt quá sẽ bị ẩn đi và thay thế bởi dấu 3 chấm.

element {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}

Với Inline-block-element(ví dụ như thẻ a)

element {
  display: inline-block;
  max-width: 100%;
  
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; /* text-overflow: clip; */
}