Hướng dẫn text-stroke bootstrap

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- Text Alignment (Căn chỉnh văn bản)

text-justify-example

.text-justify

   In my younger and more vulnerable years my father gave me some advice that
   I've been turning over in my mind ever since.
   'Whenever you feel like criticizing anyone,' he told me,
   'just remember that all the people in this world haven't had the advantages that you've had.'

text-alignment-example

Text Alignment

(.text-left) Left aligned text.
(.text-center) Center aligned text.
(.text-right) Right aligned text.

Các lớp khác có thể sử dụng trong tình huống "Responsive":

• text-left
• text-center
• text-right
• text-sm-left
• text-sm-center
• text-sm-right
• text-md-left
• text-md-center
• text-md-right
• text-lg-left
• text-lg-center
• text-lg-right
• text-xl-left
• text-xl-center
• text-xl-right

text-alignment-responsive-example

Text Alignment


   (.text-left .text-sm-center .text-md-right)

2- Text wrapping & overflow

Wrapping là hiện tượng một phần nội dung của văn bản bị đẩy xuống các dòng dưới nếu độ dài của văn bản lớn hơn chiều rộng của phần tử cha.

text-wrapping-example

Text Wrapping

  Bootstrap is a free and open-source front-end framework.

Áp dụng lớp .text-nowrap cho phần tử cha để loại bỏ hiện tượng wrapping, nhưng bạn sẽ nhìn thấy hiện tượng văn bản bị tràn (overflow) ra ngoài phần tử cha.

text-nowrap-example

.text-nowrap


   Bootstrap is a free and open-source front-end framework.

Để tránh nội dung văn bản tràn ra ngoài phần tử cha bạn có thể dùng lớp .text-truncate để áp dụng cho phần tử cha, phần nội dung tràn ra bên ngoài sẽ bị ẩn đi và xuất hiện 3 dấu chấm (...) ở cuối văn bản.

Lớp .text-truncate chỉ áp dụng được cho các phần tử được thiết lập {display:block} hoặc {display:inline-block}. Chú ý: