Hướng dẫn css line-height on wrapped text - chiều cao dòng css trên văn bản được bao bọc

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

Độ cao dòng được đặt thành 30px, tốt cho 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 đường dây, độ 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 và không chỉ là tiếp tục của văn bản liên kết.

Tôi muốn bằng cách nào đó (không có JS hoặc trên độ dài chuỗi kết thúc phần mềm trung gian) để có được văn bản liên kết được bọc để có độ cao dòng 10px hoặc lâu hơn để tạo ấn tượng trực quan về việc tiếp tục và không tách.

Johnnyrose

7.05017 Huy hiệu vàng42 Huy hiệu bạc61 Huy hiệu đồng17 gold badges42 silver badges61 bronze badges

hỏi ngày 12 tháng 3 năm 2012 lúc 15:55Mar 12, 2012 at 15:55

Virtualeyesvirtualeyesvirtualeyes

11.1k6 Huy hiệu vàng55 Huy hiệu bạc90 Huy hiệu Đồng6 gold badges55 silver badges90 bronze badges

Line-height được cho là đặt khoảng cách giữa các dòng (đặc biệt, khi chúng quấn). Những gì bạn có thể đang tìm kiếm là

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

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

0 trên đối tượng

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

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

1. Nếu bạn đặt

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

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

2 thành giá trị nhỏ hơn mà bạn muốn khi các dòng kết thúc và đặt

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

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

0 thành giá trị mà bạn muốn ở giữa các mục, bạn sẽ tốt để đi.

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

Đã trả lời ngày 12 tháng 3 năm 2012 lúc 16:23Mar 12, 2012 at 16:23

5

Tôi sẽ làm theo cách này

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

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

​

Hoặc bạn có thể đặt phần tử giả "dòng đầu tiên" như trong ví dụ này

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

Đã trả lời ngày 12 tháng 3 năm 2012 lúc 16:07Mar 12, 2012 at 16:07

Thepriebethepriebethepriebe

1.2832 huy hiệu vàng15 Huy hiệu bạc27 Huy hiệu đồng2 gold badges15 silver badges27 bronze badges

2

Trong bài viết này, bạn sẽ tìm hiểu về thuộc tính CSS

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

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

2 và cách bạn có thể sử dụng nó để tạo văn bản dễ chịu, dễ đọc trực quan.

Bạn có thể đã thấy độ cao dòng được sử dụng trước đây:

p {
  font-size: 16px;
  line-height: 1.2;
}

Nhưng nó hoạt động như thế nào, và nó có vai trò gì trong CSS?

Rễ kiểu chữ trong CSS

Nhiều ý tưởng trong CSS đã được rút ra từ kỷ luật của kiểu chữ. Một ví dụ là thuộc tính CSS Line Height đặt khoảng cách giữa hai đường cơ sở của văn bản được bọc.

Đường cơ sở của người Viking là dòng tưởng tượng mà văn bản nằm trên.

Ví dụ: nếu chúng ta có đoạn văn bản ngắn này bên trong thẻ

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

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

5:

  The alligator went for a swim in the deep lagoon.

Nếu bạn kéo cửa sổ trình duyệt của mình để văn bản được bọc vào dòng tiếp theo, bạn có hai đường cơ sở và chiều cao dòng (được biểu thị bằng các mũi tên màu vàng):

Một giá trị lớn hơn cho thuộc tính CSS

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

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

2 sẽ mở rộng khoảng cách này và các giá trị nhỏ hơn sẽ thu hẹp nó.

---

Chiều cao dòng và khả năng đọc văn bản

Thuộc tính có chiều cao dòng đóng vai trò trung tâm trong việc làm cho văn bản có thể đọc được cho người dùng. Khi bạn đánh giá thấp

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

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

2, nó sẽ cảm thấy đông đúc. Đọc văn bản như thế này trong thời gian dài sẽ cảm thấy mệt mỏi với người dùng:

Nếu nó quá lớn, người dùng sẽ gặp khó khăn trong việc cảm thấy tham gia vào những gì họ đang đọc:

Nhưng khi bạn tìm thấy đúng

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

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

2, văn bản của bạn sẽ cảm thấy rộng rãi và hài hòa

Tìm đúng

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

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

2 sẽ thay đổi dựa trên nhu cầu của bạn, nhưng nó cũng phụ thuộc vào gia đình phông chữ mà bạn sử dụng. Điều này là do mỗi phông chữ có tính cách riêng và sẽ đọc khác nhau trong một khối văn bản đáng kể.

Ví dụ, Helvetica và Times New Roman sẽ yêu cầu khoảng cách

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

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

2 khác nhau ngay cả khi cả hai đều có cùng một

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

1.

Cú pháp cho chiều cao dòng

Bạn có thể cung cấp chiều cao dòng với tất cả các loại giá trị! Nó cũng khá khác biệt với các thuộc tính CSS khác vì nó có thể chấp nhận các giá trị

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

2 và ____23 điển hình, nhưng nó cũng có giá trị đơn vị không đơn vị riêng của riêng mình:

/* Use browser default.
 Typically "1.2" for
 all the major browsers */
line-height: normal;

/* Unitless (only line-height can do this!) */
line-height: 1.2;

/*  values like px, rem, em, pt */
line-height: 3em;

/*  values */
line-height: 120%;

Độ cao dòng được ký hiệu là mũi tên màu vàng.

Cách trình duyệt tính toán độ cao dòng

Nếu bạn sử dụng một tỷ lệ phần trăm hoặc giá trị đơn vị, thì kích thước phông chữ sẽ được tính vào kết quả

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

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

2. Ví dụ: cả hai đoạn trích bên dưới sẽ tính toán thành

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

5 bằng trình duyệt:

.myText {
  font-size: 16px;
  line-height: 1.2  /* (19.2px = 16 x 1.2) */
}

.myText {
  font-size: 16px;
  line-height: 120%;  /* (19.2px = 16 x 1.2) */
}

Tuy nhiên, nếu bạn sử dụng các giá trị độ dài của người Viking như

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

6, thì

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

1 won sẽ được sử dụng để tính toán

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

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

2:

.myText {
  font-size: 16px;
  line-height: 20px;  /* Always 20px! */
}

Trong khi cả hai giá trị tỷ lệ phần trăm và các giá trị đơn vị của người khác dường như giống hệt nhau, có những khác biệt tinh tế. Các thực tiễn tốt nhất đề xuất sử dụng các giá trị trực tuyến trên mạng bất cứ khi nào có thể

Sự kết luận

Nói chung, một

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

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

2 tốt trong khoảng từ 1,5 đến 1,7 cho hầu hết các phông chữ. Alligator.io, ví dụ, sử dụng chiều cao dòng là 1.6. Nó có nhiều nghệ thuật hơn là khoa học, và nhiều lần bạn sẽ thấy mình mở trình duyệt của mình

Để tìm hiểu thêm, hãy truy cập MDN để biết tài liệu về chiều cao dòng.

CSS chiều cao dòng mặc định là gì?

Là hàng đầu giống như chiều cao dòng?