Cách đặt chiều cao phần tử cho số dòng văn bản cố định

Question

Cho một số văn bản chiếm khoảng 10 hàng, làm cách nào tôi có thể đổi kích thước vùng chứa để chỉ hiển thị 3 hàng đầu tiên và ẩn các hàng khác? Rõ ràng việc này, nhưng tôi nghĩ rằng nó không phải là đáng tin cậy:

.container { 
    height: 7.5ex; /* 2.5ex for each visible line */ 
    overflow: hidden; 
} 

Tôi có thể dựa trên thực tế là height of one row = 2.5ex hoặc là chỉ là một sự trùng hợp trong các trình duyệt Tôi đang sử dụng để kiểm tra?

Answer 1

Nếu bạn đang sử dụng này, bạn nên đảm bảo line-height luôn là 2.5ex

.container { 
    line-height: 2.5ex; 
    height: 7.5ex; /* 2.5ex for each visible line */ 
    overflow: hidden; 
} 

Demo

Answer 2

Các đơn vị cũ là phông chữ x-height (chiều cao của nhân vật x của nó). Tôi sẽ không sử dụng điều này ở đây. Bạn nên sử dụng đơn vị em. Đây là chiều cao phông chữ thực tế. Chiều cao phông chữ được xác định bằng cách đặt thuộc tính chiều cao dòng. Vì vậy:

.container { 
    height: 3em; /* 1em for each visible line */ 
    overflow: hidden; 
} 

Dưới đây là một số thông tin thêm về đơn vị chiều dài CSS: http://www.w3.org/TR/CSS21/syndata.html#length-units

Answer 3

bạn có thể thiết lập chiều cao dòng của một văn bản và cùng với nó biết chiều cao chính xác của mỗi hàng và thiết lập chiều cao mong muốn của container của bạn , chỉ cần làm điều này:

.container { 
    line-height:25px; 
    height:75px; 
    overflow:hidden; 
} 

Bây giờ mọi thứ hoạt động một cách đúng đắn :)

Answer 4

Bạn có thể sử dụng thuộc tính webkit line-kẹp

.container { 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
} 

Nó không hoạt động trên tất cả các trình duyệt, nhưng hy vọng một ngày nào đó nó sẽ hoạt động.