一、CSS 不允許換行

在 CSS 中，有幾種方法可以控制文本不換行：

1. 使用?white-space?屬性

.no-wrap {white-space: nowrap;
}

white-space: nowrap;?會強制文本在一行顯示，不換行。

2. 使用?overflow?和?text-overflow

通常與?white-space: nowrap?結合使用：

.ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; /* 超出部分顯示省略號 */
}

3. 使用?display?屬性

.inline {display: inline; /* 內聯元素默認不換行 */
}

4. 使用?flex?布局防止換行

.flex-container {display: flex;flex-wrap: nowrap; /* 子元素不換行 */
}

注意事項

• 強制不換行可能導致內容溢出容器

• 考慮使用?overflow?屬性處理溢出的內容

• 在響應式設計中，可能需要媒體查詢來調整小屏幕上的顯示方式

二、CSS 允許換行（控制文本換行行為）

在 CSS 中，有幾種方法可以控制文本換行：

1. 默認換行行為（允許換行）

.wrap-normal {white-space: normal; /* 默認值，允許換行 */
}

2. 只在單詞邊界處換行

.word-wrap {word-wrap: break-word; /* 舊語法，現代瀏覽器已支持 */overflow-wrap: break-word; /* 標準語法 */
}

3. 強制任意位置換行（包括長單詞或URL）

.break-all {word-break: break-all; /* 可在任意字符間斷行 */
}

4. 保留換行符和空格（多行文本）

.preserve-wrap {white-space: pre-wrap; /* 保留空格和換行符，但會換行 */
}

5. 使用 flex 布局允許換行

.flex-wrap {display: flex;flex-wrap: wrap; /* 允許子元素換行 */
}

6. 網格布局中的換行控制

.grid-wrap {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

實際應用示例

/* 允許長單詞在必要時換行 */
.article {overflow-wrap: break-word;hyphens: auto; /* 可選：添加連字符 */
}/* 多列布局中的換行控制 */
.columns {column-width: 200px;column-gap: 20px;
}

注意事項

1. word-break: break-all?會破壞單詞完整性

2. overflow-wrap: break-word?更語義化，優先考慮使用

3. 對于中文文本，通常不需要特殊處理，因為漢字本身就是獨立的語義單元

4. 考慮添加?hyphens: auto?來改善換行后的視覺效果（需要瀏覽器支持）