CSS如何讓文字遇到圖片換行

在CSS中，我們可以使用多種方法來讓文字在遇到圖片時(shí)能夠自動(dòng)換行，以下是一種簡(jiǎn)單的方法：

1、將圖片設(shè)置為浮動(dòng)元素（float），這樣可以讓其后的文字環(huán)繞圖片顯示。

img {
  float: left; /* 或者使用 right 來讓圖片浮動(dòng)到右邊 */
}

2、使用媒體查詢（media queries）來確保在不同屏幕尺寸下，文字都能正常換行。

@media (max-width: 600px) {
  img {
    float: none; /* 在小屏幕下，圖片不再浮動(dòng) */
  }
}

3、如果需要更***的控制，可以使用CSS的Flexbox布局或者Grid布局來讓文字在特定位置換行，使用Flexbox布局：

.container {
  display: flex;
  flex-wrap: wrap; /* 啟用換行 */
}
.text {
  flex: 1 0 100%; /* 讓文字占據(jù)全部寬度，并啟用換行 */
}

通過以上方法，我們可以輕松地在CSS中實(shí)現(xiàn)文字遇到圖片自動(dòng)換行的效果。