CSS: Bạn có thể ngăn chặn tràn: ẩn khỏi cắt dòng cuối cùng của văn bản không?

Question

Khi sử dụng CSS overflow: hidden, tôi thường thấy rằng dòng cuối cùng của văn bản bị cắt một phần. Có cách nào để ngăn chặn điều này để bất kỳ một phần dòng không hiển thị. Hầu như giống như một từ bọc dọc.

Answer 1

Rob là chính xác. Tôi đã làm một div có chiều cao tối đa là 11em và dòng cuối cùng của văn bản tràn chỉ là một nửa ở đó. trắng-không gian: nowrap chỉ loại bỏ dòng cuối cùng tất cả cùng nhau.

tôi đã cố gắng

white-space: nowrap; 

và Gaby cũng là đúng rằng điều này gây ra vấn đề quá.

Điều tốt nhất tôi đã đưa ra là để fiddle với line-height và div chiều cao cho đến khi các dòng ít nhất đã bị cắt-off

Answer 2

Giải pháp này làm việc cho tôi: https://stackoverflow.com/a/17413577/2540428 Về cơ bản tạo ra một div wrapper với đệm thích hợp và đặt nội dung trong div chính nơi bạn chỉnh sửa chiều cao của nó và ẩn tràn. Xem liên kết để biết thêm chi tiết.

Answer 3

Bạn có thể sử dụng wrapper div và nhiều cột css:

.wrapper { 
    -webkit-column-width: 150px; //You can't use 100% 
    column-width: 150px; 
    height: 100%; 
} 

Solution dụ:http://jsfiddle.net/4Fpq2/9/

Cập nhật 2017-09-21

Trong Firefox giải pháp này vẫn hoạt động nhưng bị hỏng trong Chrome. Gần đây, Chrome bắt đầu phá vỡ các cột bằng các phần nhỏ, cũng dừng phá vỡ nội dung nếu bạn đặt chiều cao. Trong ví dụ này http://jsfiddle.net/4Fpq2/446/, tôi thay đổi chiều cao thành chiều cao tối đa và hiển thị hành vi Chrome lạ. Nếu bạn có ý tưởng xin vui lòng viết bình luận.

Answer 4

Có hai thuộc tính css3 tồn tại. 1) word-break & 2) word-arap

Đừng quên đây là thuộc tính mới là css3. Vì vậy, các trình duyệt cũ hơn không hỗ trợ thuộc tính đó.

.class-name {word-break: break-all;} 
.class-name {word-wrap: break-word;} 

Answer 5

Khi bạn hiểu cách hoạt động của column-width, câu trả lời của @ stalkerg có ý nghĩa rất lớn.

column-width chia nội dung thành các cột, vì vậy dòng cuối cùng của văn bản sẽ không vừa, nó sẽ được chuyển sang cột tiếp theo. Bây giờ, mẹo là làm cho chiều rộng cột rộng như vùng chứa. Vùng chứa đã tràn: bị ẩn, vì vậy cột thứ 2 sẽ không hiển thị.

.box { 
    width: 200px; 
} 
.container { 
    -webkit-column-width: 200vw; 
    -moz-column-width: 200vw; 
    column-width:   200vw; 
    height:    100%; 
} 

Answer 6

chỉ thêm thuộc tính chiều rộng cột và đặt chiều rộng của vùng chứa, nó sẽ hoạt động.

Answer 7

mà làm việc cho tôi:

.wrapper_container{ 
    width: 300px; 
    height: 200px; 
    overflow: hidden; 
} 

.wrapper{ 
    -webkit-column-width: 300px; 
    column-width: 300px; 
    height: 100%; 
}