Hidden dots and the end of a multiline text

Chào ae! Mình lại lên đây cùng anh em trao đổi "võ công", haha....Thực ra là mình đang làm front-end, thấy cái này hay hay, nên chia sẻ cùng anh em, mà thể nào anh em front-end cũng có thể phải gặp qua.

Như:

- Một dòng quá dài, không muốn nó hiện đầy đủ.

- Làm một đoạn text giới thiệu rồi ... ( read more ).

Vân vân và mây mây.

Vậy làm sao để nó hiển thị được three dot ( dấu ba chấm ở chỗ mình cần? ). Hay đếm từ rồi cộng ... vào sau, haha cũng là một ý tưởng. Nhưng nay mình sẽ giới thiệu mọi người một cách mà chỉ cần dùng html, css mà thôi.

Bắt đầu luôn cho "nóng". Đầu tiên là trên 1 dòng.

Mình sẽ dùng các thuộc tính sau:

{

   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

}

- Văn bản sẽ hiển thị trên cùng một hàng, chỉ xuống hàng khi gặp thẻ <br /> khi anh em dùng white-space: nowrap

- Vậy giờ làm sao để có dấu ... có ngay thằng text-overflow: ellipsis; thằng này cắt một đoạn text và thay thế bằng dấu 3 chấm.

- Khi chiều cao của thành phần chứa text không đủ chứa text, thì text bị tràn sẽ được dấu đi nhờ thuộc tính overflow: hidden;

Cùng test luôn anh em nhé. Học là phải đi đôi với hành, haha...