Làm thế nào để mạnh mẽ chiều cao dòng trong css, không có streches?

Question

Làm thế nào tôi có thể buộc chiều cao dòng trong CSS, theo cách như vậy mà không có chữ cái lớn sẽ kéo dài chiều cao dòng. Thay vào đó, họ nên clip theo dòng trên, hoặc thậm chí hợp nhất với dòng trên.

CSS line-height dường như hoạt động như tùy chọn chiều cao dòng "ít nhất" của MS Word theo mặc định. Tôi muốn làm cho nó hoạt động như tùy chọn “chính xác” của MS Word.

Ví dụ:

• http://jsfiddle.net/DUpgN/

Ở đó, các dòng không phải là cùng một chiều cao, bởi vì một dòng có một số chữ lớn hơn trong đó. Tôi muốn tất cả các dòng có cùng chiều cao bất kể.

Answer 1

Glyphs (cơ quan đại diện hình ảnh của một nhân vật) được tập trung theo chiều dọc trong một hộp inline. Nếu chiều cao dòng lớn hơn chiều cao nội dung , một nửa sự khác biệt được thêm vào dưới dạng không gian ở trên cùng; cùng một số tiền cũng được thêm ở dưới cùng.

Đó là trường hợp chính, không in đậm, văn bản trong ví dụ của bạn.

Khi được đặt trên phần tử nội tuyến không được thay thế, nó chỉ định chiều cao được sử dụng để tính chiều cao của hộp đường xung quanh.

Vì vậy, trong văn bản in đậm, bạn vẫn sẽ có kích thước phông chữ 8,5px ở trên gây ra sự cố.

Bạn có thể ngăn chặn bằng cách đặt chiều cao dòng nhỏ hơn so với kích thước phông chữ (check this demo). Vì nó là một phần tử nội tuyến, và không có overflow:hidden; nó sẽ vẫn có thể nhìn thấy được, nhưng nó sẽ không thêm bất kỳ pixel nào vào phần còn lại của chiều cao dòng văn bản.

Theo tôi biết, không thể "kéo giãn" các chữ cái, trừ khi bạn sử dụng một số thuộc tính CSS3 như transform:scale(value) v.v.

Reference

---

Code:

<p>ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac <b>ac</b> 
ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac</p> 

CSS:

p { 
    line-height:17px;   
    font-size:15px; 
    width:150px; 
} 
b { 
    font-size:25px; 
    line-height:1px; 
}​ 

Answer 2

Không có cách nào. Bạn có thể nghĩ về việc mở rộng chiều cao dòng, ví dụ 30px và bạn sẽ có cùng chiều cao tất cả các dòng.

Answer 3

lẽ thêm

display:inline-block; 
height:13px; 

cho thẻ b

Answer 4

Không chắc nếu đây là những gì sau khi bạn nhưng điều này sẽ cắt giảm bất kỳ văn bản đó là lớn hơn so với line-height.

b { 
    display:inline-block; 
    overflow:hidden; 
    vertical-align:top; 
    }