Hướng dẫn span next line css - span dòng tiếp theo css

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;
}

Hướng dẫn span next line css - span dòng tiếp theo css

Alpha

Phù bằng vàng 140K2727 gold badges283 silver badges303 bronze badges

hỏi ngày 5 tháng 2 năm 2018 lúc 16:35Feb 5, 2018 at 16:35

3

thử cái này . Nó có thể giải quyết vấn đề của bạn


Đã trả lời ngày 5 tháng 2 năm 2018 lúc 16:40Feb 5, 2018 at 16:40

Samehanwarsamehanwarsamehanwar

2.5952 Huy hiệu vàng16 Huy hiệu bạc21 Huy hiệu đồng2 gold badges16 silver badges21 bronze badges

0

Thẻ
trong HTML tạo ra một khoảng trống

trông như thế này^


(thước ngang) sẽ tạo ra một không gian cũng như đường dây,
The
(horizontal ruler) will create a space as well as line,


trông như thế này^

 
 
 
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

Hướng dẫn span next line css - span dòng tiếp theo css

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.

Cấu trúcVới giá trị như sau:Ví dụHTML viết:
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-spaceCSS 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ợ