CSS如何設置不換行

一、使用white-space屬性

在CSS中，可以通過white-space屬性來解決不想要文字換行的問題。white-space屬性是指定如何處理元素中的空格、換行符和製表符等空白字元。常見的屬性值有normal、nowrap、pre、pre-wrap和pre-line。

1、normal：默認值，瀏覽器會忽略不必要的空格和換行符，只保留一個空格。

.example-normal {
  white-space: normal;
}

2、nowrap：元素中的內容不會換行，除非在遇到br標籤或換行符時，或者用CSS強制換行。

.example-nowrap {
  white-space: nowrap;
}

3、pre：元素中的空格、換行符和製表符會被完全保留，文本將按照其原始格式進行顯示。

.example-pre {
  white-space: pre;
}

4、pre-wrap：元素中的空格、換行符和製表符會被完全保留，而當內容太長時，文本將自動換行。

.example-pre-wrap {
  white-space: pre-wrap;
}

5、pre-line：元素中的空格、換行符和製表符會被壓縮成一個空格，而跨行換行符會起作用。

.example-pre-line {
  white-space: pre-line;
}

二、使用word-break、word-wrap屬性

word-break和word-wrap屬性用來控制文本超出容器時的斷行方式。

1、word-break：設置如何斷行單詞或漢字。通常默認值為normal，不允許單詞或漢字換行，而break-all可以強制將單詞或漢字斷開換行。

.example-word-break {
  word-break: break-all;
}

2、word-wrap：當一個單詞太長時，該屬性用來控制是否允許換行。normal不允許單詞換行，而break-word可以強制斷行。

.example-word-wrap {
  word-wrap: break-word;
}

三、使用overflow-wrap屬性

overflow-wrap屬性被用來控制長單詞和 URL 是否允許被斷開換行。

1、normal：單詞不會斷開換行。

.example-overflow-normal {
  overflow-wrap: normal;
}

2、break-word：單詞會斷開換行。

.example-overflow-break-word {
  overflow-wrap: break-word;
}

四、使用text-overflow屬性

text-overflow屬性被用來控制當文本溢出容器時的截斷方式。常見的屬性值有clip、ellipsis和string。

1、clip：文本溢出時隱藏

.example-text-overflow-clip {
  text-overflow: clip;
}

2、ellipsis：文本溢出時顯示省略號

.example-text-overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

3、string：文本溢出時顯示指定的字元串

.example-text-overflow-string {
  overflow: hidden;
  text-overflow: '<...>';
  white-space: nowrap;
}