Tách HTML/CSS để cho phép tràn-x: auto & overflow-y: hiển thị?

Question

Tôi có một 400px x 400px div mà tôi muốn cuộn theo chiều dọc. Vì vậy, tôi đang thiết lập overflow-y: auto. Nhưng đôi khi, tôi muốn nội dung bên trong div tràn over-x: hiển thị.

Điều này không hiệu quả. Tôi nghĩ rằng đó là vì bạn không thể đặt các giá trị tràn khác nhau nếu một trong số chúng hiển thị.

True?

Nếu không, có sửa lỗi css/js phù hợp cho điều này không? Tôi nhận thấy ứng dụng dòng chảy gắn thêm một div được tính toán, tuyệt đối vào cơ thể bất cứ khi nào một tình huống như thế này xảy ra: http://cl.ly/32392W0U2t1y2Q103X2d. Đây có phải là giải pháp tốt nhất không? Và có bất kỳ plugin/hướng dẫn nào để xem không?

Answer 1

Thử thêm white-space: nowrap;

Answer 2

Bạn không thể đặt các giá trị tràn khác nhau nếu một trong số chúng hiển thị; bản thảo Mô hình hộp CSS3 cho biết điều này trong phần overflow: “Giá trị được tính của 'tràn-x' và 'tràn-y' giống với giá trị được chỉ định của chúng, ngoại trừ một số kết hợp với 'hiển thị' là không thể: được chỉ định là 'có thể nhìn thấy' và cái kia là 'cuộn' hoặc 'tự động', thì 'hiển thị' được đặt thành 'tự động'. ”

Về cách giải quyết, trước tiên bạn cần quyết định hành vi mong muốn là gì. Khi bạn có một thanh cuộn bên phải, làm thế nào sẽ tràn-x: có thể nhìn thấy công việc? Nếu các nội dung tràn tiếp tục ở bên phải của thanh di chuyển bằng cách nào đó? Điều này sẽ rất khó để sắp xếp. Hoặc thanh cuộn có di chuyển sang phải không?