CSS - chiều rộng so với chiều cao - chiều rộng có mức độ ưu tiên

Question

Tôi gặp phải một vấn đề cụ thể mà dường như không được giải quyết ở bất kỳ đâu. Khi tôi có cả chiều rộng và chiều cao cố định trên div chứa, thì mọi văn bản bên trong div chỉ tràn theo chiều dọc, nhưng không theo chiều ngang.

Ví dụ ở đây: http://jsfiddle.net/TgPRM/1382/

#container { 
    height:50px; 
    max-height:50px; 
    width:50px; 
} 

Bây giờ những gì thậm chí còn lạ chiều rộng có ưu tiên ngay cả khi tôi quấn văn bản bên trong một đoạn văn và thiết lập chiều cao cố định/max-height (nhưng không rộng!) trên đoạn đó. Văn bản chọn để không tôn trọng chiều cao được đặt trên phần tử gốc của nó và thay vào đó hãy tôn trọng độ rộng được đặt trên phần tử chính của nó.

Ví dụ ở đây: http://jsfiddle.net/TgPRM/1377/

Câu hỏi của tôi là, tại sao được đưa ra chiều rộng rất nhiều ưu tiên và những gì chúng ta có thể làm cho các văn bản tràn theo chiều ngang chứ không phải theo chiều dọc?

Chỉnh sửa: Tôi muốn giữ nguyên luồng : hiển thị để bất kỳ giải pháp nào dựa trên thuộc tính tràn không giải quyết được sự cố của tôi. Trắng-không gian: nowrap có vẻ là một giải pháp cực đoan, vì nó thậm chí không tôn trọng kích thước cửa sổ trình duyệt (thử một văn bản rất dài). Vì vậy, tôi chấp nhận giải pháp của Evan vì nó hoạt động chính xác như tôi mong đợi đã làm ví dụ của tôi để làm việc.

Answer 1

Điều này có đủ không?

http://jsfiddle.net/TgPRM/1385/

#wrapper{ 
 
    position:relative; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
#container{ 
 
height:100px; 
 
max-height:100px; 
 
width:50px; 
 
background-color:red; 
 
} 
 

 
p { 
 
    background-color:green; 
 
    height:50px; 
 
    max-height:50px; 
 
    position:absolute; 
 
    padding:5px; 
 
}

<div id="wrapper"> 
 
    <div id="container"><p>hello this is a very long long long long paragraph</p></div></div>

Answer 2

Điều này là do bạn chưa chỉ định cách bạn muốn trình duyệt xử lý tràn cho phần tử div để trình duyệt của bạn có thể chọn cho bạn. Để có được những gì tôi nghĩ rằng bạn muốn bạn sẽ cần một cái gì đó như thế này:

#container{ 
    height:50px; 
    max-height:50px; 
    width:50px; 
    background-color:red; 
    overflow-x: scroll; /* Scrolls horizontally */ 
    overflow-y: hidden; /* Doesn't scroll vertically */ 
    white-space: nowrap; /* Text doesn't automatically wrap due to width */ 
} 

Answer 3

Nó không phải là ưu tiên - nó đơn giản từ gói. Bạn có thể kiểm tra xem nó nếu word'll của bạn rất dài (http://jsfiddle.net/sergdenisov/y4wkmvcs/1/):

<div id="container"> 
    <p>hello_this_is_a_very_long_long_long_long_paragraph</p> 
</div> 

Bạn không thể phù hợp với bất kỳ nội dung trong container với cố định width và height. Nếu bạn muốn, bạn không nên sử dụng cố định width và height - có thể sử dụng min-width hoặc min-height.

Nếu bạn muốn chứa tràn nội dung chỉ theo chiều ngang, bạn có thể làm theo cách này (http://jsfiddle.net/sergdenisov/5079bkdr/):

p { 
    background-color:green; 
    height:50px; 
    max-height:50px; 
    display: inline-block; 
    white-space: nowrap; 
} 

Tất cả đều phụ thuộc vào vấn đề cụ thể của bạn.