CSS `width` 和 `max-width` 如何與文字環繞互動？

換行上的CSS 寬度和最大寬度：了解行為

使用CSS 定義元素的寬度時，寬度和max-寬度屬性起寬度著重要作用。 width 設定元素的確切寬度，而 max-width 指定允許的最大寬度。但是，如果文字在元素內換行，這些屬性的行為可能會出乎意料。

考慮以下 CSS 程式碼：

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

根據提供的程式碼，預期為工具提示的寬度會根據其內容動態調整，最小寬度為 50px，最大寬度為 250px。然而，據觀察，當工具提示中的文字換行時， max-width 屬性會覆蓋 width 屬性，從而導致工具提示留下過多的填充，從而導致外觀不美觀。

此行為確實正常。瀏覽器將嘗試在框中內嵌文本，直到達到最大寬度 250px。一旦達到此限制，剩餘的文字將換行到下一行。但是，文字換行後框的寬度不會再次縮小，因為這不是文字換行的預期行為的一部分。

因此，框的寬度計算為 250px，因為 CSS 規範規定它不能超過那個值。它不會被計算為等於換行後的文字寬度，然後被 max-width 覆蓋。

不幸的是，沒有已知的解決方法可以更改此行為。

以上是CSS `width` 和 `max-width` 如何與文字環繞互動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！