Chiều cao dòng ghi đè CSS trên từ bọc

Question

Tôi có danh sách các liên kết được liên kết với một hộp khá hẹp; đủ hẹp cho một số liên kết để bọc.

chiều cao dòng được đặt thành 30px, phù hợp với các liên kết không được bọc; tuy nhiên, đối với một liên kết có văn bản đủ dài để buộc một dòng bọc, chiều cao dòng 30px cũng được áp dụng ở đó, do đó làm cho nó xuất hiện như thể có 2 liên kết chứ không chỉ là liên kết văn bản liên kết.

Tôi muốn bằng cách nào đó (không có js hoặc kết thúc phần cuối trung gian) để có văn bản liên kết được bao bọc có chiều cao dòng 10px hoặc hơn để tạo ấn tượng trực quan về sự tiếp tục và không tách rời.

Answer 1

Line-height là nghĩa vụ phải thiết lập khoảng cách giữa các dòng (đặc biệt là khi chúng quấn). Những gì bạn có thể đang tìm kiếm là margin trên đối tượng li. Nếu bạn đặt line-height thành giá trị nhỏ hơn mà bạn muốn khi các dòng bọc và đặt margin thành giá trị bạn muốn ở giữa các mục, bạn nên làm tốt.

Xem nếu điều này làm những gì bạn muốn:

li { 
    padding: 10px 0 0 0; 
    margin: 30px 0; 
    line-height: 10px; 
} 

Answer 2

tôi sẽ làm điều đó this way

li { 
    list-style-position: inside; 
    margin: 20px; 
} 

ul { 
    width: 200px; 
    border: solid 1px; 
} 

Hoặc bạn có thể thiết lập các "đầu tiên-line" yếu tố giả như trong this example

li { 
    padding: 10px 0 0 0; 
    margin: 10px; 
    line-height: 30px; 
} 
li:first-line { 
    margin: 10px; 
    line-height: 10px; 
} 
ul { 
    width: 200px; 
}