Hướng dẫn css xuống dòng
Để xuống dòng trong CSS bạn có thể dùng thuộc tính display, gán giá trị là block. Trong HTML, những thẻ mà bạn gõ chữ xong mà nó xuống dòng luôn, gọi là thể block. Vì trong nội tại của nó đã có sẵn thuộc tính display block. Ví dụ như thẻ h2, h2, h3,… Còn những thẻ không tự xuống dòng là những thẻ không có sẵn thuộc tính display block. Đó gọi là thẻ
inline, nghĩa là trong một dòng. Ví dụ như span, a, b,… Nếu bạn muốn nó xuống dòng thì thêm thuộc tính display block vô trong CSS. Có những thẻ không có tác dụng với thuộc tính margin, ví dụ bạn đặt cho nó thuộc tính margin-top nhưng không thấy nó thay đổi gì cả. Trong trường hợp này, thuộc tính display block sẽ giúp cho nó áp phê. Ví dụ: – Ở đây mình đang đặt thuộc tính cho thẻ span với mục
đích muốn nó cách lề trên 100px. Ngược lại với thuộc tính display block là thuộc tính display inline, công dụng của nó là làm cho một thẻ xuống dòng trở thành không xuống dòng. Nếu một từ có kích thước quá dài so với chiều rộng của phần tử chứa nó thì từ đó sẽ không tự động ngắt xuống dòng, mà nó vẫn hiển thị trên một dòng, dẫn đến việc từ đó bị tràn ra ngoài. Ví dụ: Học lập trình webbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb từ cơ bản đến nâng cao Từ đây, ta có thể sử dụng thuộc tính word-wrap để thiết lập việc tự ngắt xuống dòng giữa các ký tự của một từ (trong trường hợp từ đó quá dài so với chiều rộng của phần tử chứa nó) Ví dụ: Học lập trình webbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb từ cơ bản đến nâng cao Cách sử dụng thuộc tính word-wrapCú pháp:
Giải thích ý nghĩa các giá trị của thuộc tính word-wrap:
Đã đăng vào thg 9 11, 2020 8:09 SA 4 phút đọc Chào các bạn! Đã bao giờ các bạn đau đầu trong việc xử lý text dài ngắn hay không? Chẳng hạn có một số trường hợp như thế này:
Thực ra đây cũng là vấn đề của rất nhiều người. Bản thân mình khi chưa có kinh nghiệm về mấy cái này thì thường hay lạm dụng jquery để check các case. Tuy nhiên sau khi phát hiện ra 1 số thuộc tính với cách sử dụng vô cùng đơn giản thì mình đã quăng jquery ra sau đầu ngay và luôn. Bây giờ cùng đi vào bài viết nhé. 1. Text OverflowThuộc tính text-overflow dùng để xử lý một đoạn text bị tràn ra ngoài phần tử chứa nó bằng cách cắt bớt đoạn tràn hoặc hiển thị dưới dạng dấu chấm lửng "..." để làm dấu hiệu cho người dùng. Hai giá trị thường dùng nhất là:
Ngoài ra còn có 2 giá trị khác:
Kết quả hiển thị sẽ như thế này: Vậy để xem lại đoạn text đầy đủ thì làm như thế nào?
3. Word BreakWord-wrap xác định có xuống dòng hay không, còn thuộc tính work-break xác định kiểu xuống dòng. Các giá trị thường thấy là:
4. Writing ModeThuộc tính writing-mode sử dụng để định kiểu cho đoạn text được đặt theo chiều ngang hay chiều dọc. Các giá trị của writing-mode:
Kết quả hiển thị như sau: Như vậy qua bài viết bài của mình, có lẽ các bạn cũng đã hiểu được sơ sơ cách xử lý text sao cho đẹp, đơn giản và nhanh chóng rồi nhỉ. Chúc các bạn thành công! All rights reserved |