웹 디자인 및 개발에서는 일반적으로 페이지 요소의 레이아웃과 스타일을 제어해야 합니다. 텍스트 레이아웃과 관련된 가장 일반적인 문제 중 하나는 텍스트 줄 바꿈을 방지하는 방법입니다. 이 문서에서는 이 문제를 해결하는 데 도움이 되는 CSS의 몇 가지 일반적인 방법을 소개합니다.
white-space
속성은 요소 상자의 공백을 처리하는 방법을 결정합니다. normal
, >nowrap
, pre
, pre-wrap
, pre-line
. 그 효과는 다음과 같습니다: white-space
属性决定元素盒子中的空白如何处理,它有5个取值可选:normal
、nowrap
、pre
、pre-wrap
、pre-line
。它们的效果分别是:
normal
:默认值,合并多余空白,文字不换行,文字在一行上放不下就自动换行;nowrap
:不换行,这相当于把normal
和pre
的特性结合起来;pre
:保留多余空白、不合并、不换行,如果需要换行需要手动添加`pre-wrap
:保留多余空白、不合并、自动换行,如果出现需要换行的情况,则自动进行换行;pre-line
:合并多余空白,文字在一行上放不下就自动换行。因此,当我们需要让文字不自动换行时,可以使用white-space: nowrap
。
div { white-space: nowrap; }
当然,如果想要保留多余空白,也可以使用其他取值。例如,如果要使文字在一行上完整显示,可以使用white-space: pre
。
div { white-space: pre; }
在设置了white-space
属性之后,如果文本长度超过了盒子的宽度,则会进行自动换行。这时需要使用word-break
属性来控制文字的断行,它有3个取值可选:normal
、break-all
、keep-all
。它们的效果分别是:
normal
:默认值,按照标准的断词规则,在单词之间进行断行;break-all
:在单词之间进行断行,并且在英文单词内不考虑任何规则断行;keep-all
:在单词之间断行,但是英文单词内不断行。因此,可以通过将word-break
属性的取值设置为keep-all
,来让文字不进行自动换行。
div { white-space: nowrap; word-break: keep-all; }
在部分情况下,即使通过white-space
和word-break
属性设置了正确的文字排版方式,文本长度也可能超出了盒子的宽度。这时需要使用overflow
属性来控制文本的溢出效果。overflow
属性有4个取值可选:visible
、hidden
、scroll
、auto
。它们的效果分别是:
visible
:默认值,不做任何处理,允许内容超过盒子范围显示在盒子外部;hidden
:溢出部分隐藏,不可见;scroll
:显示滚动条,用户可以通过滚动条来查看超出部分;auto
:根据实际需要显示滚动条。如果想让文字在一行上显示,不自动换行,并且溢出部分隐藏,可以结合使用white-space
和overflow
属性。
div { white-space: nowrap; overflow: hidden; }
当使用overflow: hidden
属性隐藏文本溢出部分时,有可能会导致用户看不到完整的文本内容。这时可以使用text-overflow
属性来控制文本的溢出效果。text-overflow
属性有2个取值可选:clip
、ellipsis
。它们的效果分别是:
clip
:将文本截断,并隐藏超出部分,不添加省略符号;ellipsis
:将文本截断,并隐藏超出部分,添加省略符号(...
)。因此,可以通过将text-overflow
属性的取值设置为ellipsis
normal
: 기본값, 초과 공백 병합, 텍스트가 줄 바꿈되지 않고 텍스트가 한 줄에 맞지 않으면 자동으로 줄 바꿈됩니다. > nowrap
: 줄 바꿈이 없습니다. 이는 normal
과 pre
의 기능을 결합한 것과 같습니다. pre: 여분의 공백을 유지하고 병합하지 말고 줄바꿈하지 마세요. 래핑이 필요한 경우 `<br>`를 수동으로 추가해야 합니다.
pre-wrap: 초과 공백을 유지하고 병합하지 않음, 자동 줄 바꿈, 줄 바꿈이 필요한 경우 자동으로 줄 바꿈됨
pre-line
: 초과 공백 병합; 한 줄에 들어갈 수 없으면 텍스트가 자동으로 줄바꿈됩니다. white-space: nowrap
을 사용할 수 있습니다. div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
white-space: pre
를 사용하면 됩니다. div::after { content: "