Chiều rộng CSS/Chiều rộng tối đa trên Line Wrap?

Question

#tooltip 
{ 
    position: absolute; 
    width:auto; 
    min-width:50px; 
    max-width:250px; 
    padding:10px; 
    background-color:#eee; 
    border:1px solid #aaa; 
} 

Dựa trên phong cách này, tôi hy vọng chú giải công cụ của tôi sẽ thu nhỏ hoặc phát triển để vừa với nội dung, xuống đến 50px hoặc tối đa 250px. Tuy nhiên, thuộc tính chiều rộng tối đa dường như vượt quá thuộc tính chiều rộng của tôi khi nội dung kết thúc tốt đẹp với dòng tiếp theo. Đó là một điều thẩm mỹ khi từ ở cuối của một câu dài, có vẻ như nó để lại một bó đệm (xem ảnh chụp màn hình). Đó có phải là hành vi bình thường không?

Answer 1

Vâng, đó là hành vi bình thường.

Trình duyệt sẽ cố gắng dòng nội tuyến của bạn bên trong hộp cho đến khi đạt đến chiều rộng tối đa cho phép là 250px, sau đó bao bọc các dòng tiếp theo và tiếp theo bất kỳ văn bản nào không phù hợp trên dòng đầu tiên. (Nếu không có đủ văn bản để đạt đến chiều rộng tối đa, thì width: auto sẽ làm cho hộp co lại để vừa với số lượng văn bản đó.)

Tuy nhiên, hộp sẽ không co lại để vừa với văn bản sau khi gói, vì gói văn bản không hoạt động theo cách đó. Điều này có nghĩa là hộp width được tính là 250px và chỉ vì CSS của bạn cho biết rằng nó chỉ có thể tối đa 250px. Nó không được tính cho một số giá trị nhỏ hơn bằng chiều rộng của văn bản sau khi gói sau đó bị ghi đè bởi max-width.

Tôi không nghĩ bạn có thể làm gì để thay đổi hành vi này.

Answer 2

Hãy thử sử dụng một trong những điều này:

width: max-content; 
width: min-content; 
width: available; 
width: fit-content; 

Họ không tương thích 100%, nhưng tiền tố khắc phục vấn đề mà nhiều hay ít.

Nguồn: https://developer.mozilla.org/ru/docs/Web/CSS/width