<div>是HTML中的一個元素，用于創建或定義一個塊級元素。在默認情況下，div元素的寬度為100%。當內容超過div元素的寬度時，內容會自動分行。這篇文章將通過幾個代碼案例詳細解釋和演示<div>自動分行的原理和使用方法。

，我們來看一個簡單的示例：

<div>這是一個超長的內容，當內容超過div元素的寬度時，會自動分行。這是一個超長的內容，當內容超過div元素的寬度時，會自動分行。</div>

上述代碼中，我們創建了一個div元素，并在其中放置了一個超長的內容。由于div元素的寬度為100%，當內容超過div元素的寬度時，會自動分行顯示。這樣，無論內容有多長，在div元素的范圍內都能正確地自動分行。

接下來，我們來看一個稍微復雜一點的示例，使用CSS樣式來控制div元素的寬度：

<style>
.my-div {
width: 200px;
}
</style>
<div class="my-div">這是一個超長的內容，當內容超過div元素的寬度時，會自動分行。這是一個超長的內容，當內容超過div元素的寬度時，會自動分行。</div>

在上述代碼中，我們使用了一個CSS樣式類名為"my-div"，將寬度設置為200px。這樣，無論內容有多長，在寬度為200px的范圍內都能正確地自動分行。

此外，我們還可以在CSS中使用@media查詢來實現在不同屏幕尺寸下的自動分行。

<style>
.my-div {
width: 200px;
}
<br>
  @media (max-width: 480px) {
.my-div {
width: 100%;
}
}
</style>
<div class="my-div">這是一個超長的內容，當內容超過div元素的寬度時，會自動分行。這是一個超長的內容，當內容超過div元素的寬度時，會自動分行。</div>

在上述代碼中，我們使用@media查詢來指定在屏幕寬度小于或等于480px時，div元素的寬度為100%。這樣，在不同屏幕尺寸下，div元素會自動適應寬度并進行自動分行。

來說，<div>元素可以根據內容的長度自動分行，無需額外的配置。通過CSS樣式，我們還可以控制<div>元素的寬度，并使用@media查詢來適應不同屏幕尺寸下的自動分行。<div>自動分行是前端開發中常見且實用的功能，能夠有效地優化頁面布局和提升用戶體驗。