div超出寬度自動換行

一、文字超出div自動換行

在實際開發中，我們經常會遇到文字內容過長的情況，如果沒有做好處理，這些長文本可能會導致頁面布局紊亂。一種常見的解決方法是將過長的文字截斷並顯示省略號，但這也會導致用戶需要額外的操作去查看完整的內容。因此，我們可以使用CSS中的word-wrap屬性來實現當文字超出div範圍時自動換行，從而更好的展示全部的內容。

CSS樣式示例：
div{
    width: 300px;
    height: 100px;
    border: 1px solid #ddd;
    overflow: hidden;/*超出部分隱藏*/
    text-overflow:ellipsis;/*文本省略號*/
    white-space: nowrap;/*禁止換行*/
    word-wrap: break-word;/*超出部分自動換行*/
}

二、超出div部分自動換行

當我們在設計網頁時，經常會遇到超過div寬度的內容需要在同一行中顯示的情況。這時我們可以使用CSS中的“flex布局”來解決這個問題。具體地說，就是使用flex布局中的“flex-wrap: wrap”屬性，告知瀏覽器根據容器的大小和內容的大小自動換行。除此之外，我們還需要將超出div的元素設置為“flex: 0 0 auto”以讓它們佔據自己的空間，而非擠壓容器中的其他元素。

CSS樣式示例：
.container{
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    border: 1px solid #ddd;
}
.box{
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}

三、其他相關技巧

除了上述兩種情況，還有一些其他的情況下我們需要實現div超出寬度自動換行的效果。

1. 當div中同時包含圖片和文字時，我們可能希望圖片能夠自動適應div大小並且文字能夠自動環繞在圖片周圍。這時我們可以使用CSS中的“float布局”來實現。具體地說，就是將圖片元素設置為“float: left;”或“float: right;”，然後將文字元素設置為“overflow: hidden;”和“text-overflow: ellipsis;”屬性，使其自動環繞圖片並且自動截斷省略超出部分的文字。

CSS樣式示例：
.container{
    width: 300px;
    border: 1px solid #ddd;
    overflow: hidden;
}
img{
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 10px;
}
.text{
    overflow: hidden;
    text-overflow: ellipsis;
}

2. 當我們需要讓一行中元素固定寬度，但是元素的個數又不確定時，我們可以使用CSS中的“inline-block布局”來實現。具體地說，我們可以將元素設置為“display: inline-block;”和“white-space: nowrap;”屬性，使之在同一行顯示，如果元素總寬度超過div寬度，那麼就自動換行。

CSS樣式示例：
.container{
    width: 300px;
    border: 1px solid #ddd;
    white-space: nowrap;
}
.box{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}