Tôi đang sử dụng một công cụ tạo trước mã, nhưng chúng tôi có thể thao tác một số mã bằng PHP, JavaScript, HTML và CSS. Vì vậy, tôi có một siêu liên kết có hình ảnh và nhãn cho nó. Nhưng tôi cần nhãn được hiển thị bên dưới hình ảnh. Đây là cách mà mã được tạo ở đó
label
Vì vậy, tôi cần phải phá vỡ một dòng trước phần tử nhịp. Làm thế nào tôi có thể làm điều đó?
Tôi đã cố gắng sử dụng các CSS sau, nhưng nó không hoạt động:
span {
display: inline;
}
span:before {
content: "\A";
white-space: pre;
}
label
Thẻ
không phải xuất hiện trong một dòng mới trong HTML thực tế,
span {
display: inline;
}
span:before {
content: "\A";
white-space: pre;
}
0 cũng hoàn toàn hợp lệ, sở thích cá nhân của tôi là viết nó như trên dòng riêng của nó để rõ ràngĐã trả lời ngày 5 tháng 2 năm 2018 lúc 16:43Feb 5, 2018 at 16:43
2
- Thuộc tính white-space được hỗ trợ trong đa số các trình duyệt.
- Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
- Trang chủ
- Tham khảo
CSS
Thuộc tính white-space
Định nghĩa và sử dụng
tag { white-space: giá trị; }
Thuộc tính white-space xác định khoảng trắng có bên trong thành phần được xử lý như thế nào.
Hiển thị trình duyệt khi chưa có CSS: | Đây là đoạn text có chiều dài hai dòng, chúng ta sẽ sử dụng đoạn text này để dùng làm ví dụ cho thuộc tính white-space | CSS viết: | Hiển thị trình duyệt khi có CSS: |
Trên ví dụ trên ta đã dùng thuộc tính white-space: nowrap; cho thành phần , do đó đoạn text trong thành phần sẽ hiển thị trên cùng một dòng. | Trình duyệt hỗ trợ | Thuộc tính white-space được hỗ trợ trong đa số các trình duyệt. | |
pre | white-space: pre; | Khoảng trắng sẽ do trình duyệt điều khiển, văn bản sẽ hiển thị trên cùng một hàng, chỉ ngắt dòng tại đoạn văn bản sử dụng thẻ . | |
pre-line | white-space: pre-line; | Văn bản sẽ tự động bao lại khi cần thiết, và xuống hàng. | |
pre-wrap | white-space: pre-wrap; | Khoảng trắng sẽ do trình duyệt điều khiển, văn bản sẽ tự động bao lại khi cần thiết, và xuống hàng. | |
inherit | white-space: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha [thành phần bao ngoài]. |
Ví dụ
HTML viết:
Đây là đoạn text có chiều dài hai dòng, chúng ta sẽ sử dụng đoạn text này để dùng làm ví dụ cho thuộc tính white-space
Hiển thị trình duyệt khi chưa có CSS:
Đây là đoạn text có chiều dài hai dòng, chúng ta sẽ sử dụng đoạn text này để dùng làm ví dụ cho thuộc tính white-space
CSS viết:
p span { white-space: nowrap; }
Hiển thị trình duyệt khi có CSS:
Đây là đoạn text có chiều dài hai dòng, chúng ta sẽ sử dụng đoạn text này để dùng làm ví dụ cho thuộc tính white-spacethuộc tính white-space
CSS viết:
Hiển thị trình duyệt khi có CSS:
Trên ví dụ trên ta đã dùng thuộc tính white-space: nowrap; cho thành phần , do đó đoạn text trong thành phần sẽ hiển thị trên cùng một dòng.
Trình duyệt hỗ trợ