<div> 超出 變 ...
<div> 是 HTML 中的一個標簽，用于創建頁面中的一個區塊，默認情況下，<div> 元素的寬度會自動適應其內容的寬度。然而，在某些情況下，<div> 元素的內容可能超出其指定的寬度或高度，這時我們需要進行處理來控制超出部分的表現。
在 CSS 中，我們可以使用一些屬性和技巧來處理 <div> 超出的情況，如：使用 "overflow" 屬性控制內容的溢出方式、使用 "white-space" 屬性控制內容的換行方式以及使用 "text-overflow" 屬性控制內容的顯示方式。
以下是幾個案例，通過代碼和說明來詳細解釋上述提到的處理方式的使用情況。
案例一：

在這個案例中，我們創建了一個寬度為 200px、高度為 200px 的 <div> 元素，并設置其內容超出寬度。

<div style="width: 200px; height: 200px; overflow: hidden;">
這是一個超長的文本內容，會被隱藏掉。
</div>

在以上代碼中，我們通過設置 "overflow: hidden;" 屬性，使溢出的內容隱藏起來而不顯示出來。

案例二：

在這個案例中，我們創建了一個寬度為 200px、高度為 100px 的 <div> 元素，并設置其內容自動換行。

<div style="width: 200px; height: 100px; white-space: normal;">
這是一個超長的文本內容，會在超出寬度時自動換行。
</div>

在以上代碼中，我們通過設置 "white-space: normal;" 屬性，使超出寬度時自動換行，而不是橫向顯示。

案例三：

在這個案例中，我們創建了一個寬度為 200px 的 <div> 元素，并設置其內容超出寬度時用省略號表示。

<div style="width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
這是一個超長的文本內容，超出寬度時用省略號表示。
</div>

在以上代碼中，我們通過設置 "text-overflow: ellipsis;" 屬性，使超出寬度的文本部分用省略號表示，而不顯示全部內容。

以上是幾個使用 CSS 控制 <div> 超出的案例，通過合理使用這些屬性，我們可以使 <div> 元素在內容溢出時有更好的表現方式，以更好地適應頁面的布局和設計需求。