>  기사  >  웹 프론트엔드  >  CSS는 텍스트 줄바꿈을 방지합니다.

CSS는 텍스트 줄바꿈을 방지합니다.

王林
王林원래의
2023-05-21 09:41:376177검색

웹 디자인 및 개발에서는 일반적으로 페이지 요소의 레이아웃과 스타일을 제어해야 합니다. 텍스트 레이아웃과 관련된 가장 일반적인 문제 중 하나는 텍스트 줄 바꿈을 방지하는 방법입니다. 이 문서에서는 이 문제를 해결하는 데 도움이 되는 CSS의 몇 가지 일반적인 방법을 소개합니다.

1. 공백 속성

white-space 속성은 요소 상자의 공백을 처리하는 방법을 결정합니다. normal, >nowrap, pre, pre-wrap, pre-line. 그 효과는 다음과 같습니다: white-space属性决定元素盒子中的空白如何处理,它有5个取值可选:normalnowrapprepre-wrappre-line。它们的效果分别是:

  • normal:默认值,合并多余空白,文字不换行,文字在一行上放不下就自动换行;
  • nowrap:不换行,这相当于把normalpre的特性结合起来;
  • pre:保留多余空白、不合并、不换行,如果需要换行需要手动添加`
    `;
  • pre-wrap:保留多余空白、不合并、自动换行,如果出现需要换行的情况,则自动进行换行;
  • pre-line:合并多余空白,文字在一行上放不下就自动换行。

因此,当我们需要让文字不自动换行时,可以使用white-space: nowrap

div {
  white-space: nowrap;
}

当然,如果想要保留多余空白,也可以使用其他取值。例如,如果要使文字在一行上完整显示,可以使用white-space: pre

div {
  white-space: pre;
}

2. word-break属性

在设置了white-space属性之后,如果文本长度超过了盒子的宽度,则会进行自动换行。这时需要使用word-break属性来控制文字的断行,它有3个取值可选:normalbreak-allkeep-all。它们的效果分别是:

  • normal:默认值,按照标准的断词规则,在单词之间进行断行;
  • break-all:在单词之间进行断行,并且在英文单词内不考虑任何规则断行;
  • keep-all:在单词之间断行,但是英文单词内不断行。

因此,可以通过将word-break属性的取值设置为keep-all,来让文字不进行自动换行。

div {
  white-space: nowrap;
  word-break: keep-all;
}

3. overflow属性

在部分情况下,即使通过white-spaceword-break属性设置了正确的文字排版方式,文本长度也可能超出了盒子的宽度。这时需要使用overflow属性来控制文本的溢出效果。overflow属性有4个取值可选:visiblehiddenscrollauto。它们的效果分别是:

  • visible:默认值,不做任何处理,允许内容超过盒子范围显示在盒子外部;
  • hidden:溢出部分隐藏,不可见;
  • scroll:显示滚动条,用户可以通过滚动条来查看超出部分;
  • auto:根据实际需要显示滚动条。

如果想让文字在一行上显示,不自动换行,并且溢出部分隐藏,可以结合使用white-spaceoverflow属性。

div {
  white-space: nowrap;
  overflow: hidden;
}

4. text-overflow属性

当使用overflow: hidden属性隐藏文本溢出部分时,有可能会导致用户看不到完整的文本内容。这时可以使用text-overflow属性来控制文本的溢出效果。text-overflow属性有2个取值可选:clipellipsis。它们的效果分别是:

  • clip:将文本截断,并隐藏超出部分,不添加省略符号;
  • ellipsis:将文本截断,并隐藏超出部分,添加省略符号(...)。

因此,可以通过将text-overflow属性的取值设置为ellipsis

  • normal: 기본값, 초과 공백 병합, 텍스트가 줄 바꿈되지 않고 텍스트가 한 줄에 맞지 않으면 자동으로 줄 바꿈됩니다. > nowrap: 줄 바꿈이 없습니다. 이는 normalpre의 기능을 결합한 것과 같습니다.
  • pre: 여분의 공백을 유지하고 병합하지 말고 줄바꿈하지 마세요. 래핑이 필요한 경우 `<br>`를 수동으로 추가해야 합니다.
  • pre-wrap: 초과 공백을 유지하고 병합하지 않음, 자동 줄 바꿈, 줄 바꿈이 필요한 경우 자동으로 줄 바꿈됨
  • pre-line: 초과 공백 병합; 한 줄에 들어갈 수 없으면 텍스트가 자동으로 줄바꿈됩니다.
따라서 텍스트가 자동으로 줄 바꿈되는 것을 방지해야 할 경우 white-space: nowrap을 사용할 수 있습니다.

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

물론 공백을 추가로 유지하려면 다른 값을 사용할 수도 있습니다. 예를 들어 텍스트를 한 줄에 완전히 표시하려면 white-space: pre를 사용하면 됩니다.

div::after {
  content: "a0";
}

2.단어 나누기 속성

white-space 속성을 ​​설정한 후 텍스트 길이가 상자 너비를 초과하면 자동으로 줄바꿈됩니다. 이때 텍스트의 줄 바꿈을 제어하려면 word-break 속성을 ​​사용해야 합니다. 이 속성에는 normal, break-all, <code>모두 유지. 그 효과는 다음과 같습니다:

  • normal: 기본값, 표준 단어 분리 규칙에 따라 단어 사이의 줄 바꿈
  • break -all: 단어 사이에 줄을 끊고 영어 단어 내에서 줄 바꿈 규칙을 고려하지 않습니다.
  • keep-all: 단어 사이에 줄을 끊지만 영어에는 줄이 없습니다. 단어.
따라서 word-break 속성 값을 keep-all로 설정하여 텍스트가 자동으로 줄 바꿈되는 것을 방지할 수 있습니다. 🎜rrreee🎜3.overflow 속성🎜🎜경우에 따라 white-spaceword-break 속성을 ​​통해 올바른 텍스트 서식 지정 방법을 설정하더라도 텍스트 길이가 상자 너비를 초과할 수 있습니다. 이때 텍스트의 오버플로 효과를 제어하려면 overflow 속성을 ​​사용해야 합니다. overflow 속성에는 visible, hidden, scroll, auto 등 4가지 선택 값이 있습니다. 코드>. 그 효과는 다음과 같습니다: 🎜
  • visible: 기본값, 처리가 수행되지 않아 상자 범위를 벗어나는 콘텐츠가 상자 외부에 표시될 수 있습니다. 숨김: 오버플로 부분이 숨겨져 보이지 않습니다.
  • 스크롤: 스크롤 막대가 표시되며 사용자는 스크롤을 통해 오버플로 부분을 볼 수 있습니다. bar;
  • auto: 실제 필요에 따라 스크롤 막대를 표시합니다.
🎜자동 줄 바꿈 없이 텍스트를 한 줄에 표시하고 오버플로 부분을 숨기려면 공백오버플로 속성을 ​​조합하여 . 🎜rrreee🎜4.text-overflow 속성🎜🎜텍스트 오버플로 부분을 숨기기 위해 <code>overflow:hidden 속성을 ​​사용할 경우 사용자가 전체 텍스트 내용을 보지 못할 수 있습니다. 이때 text-overflow 속성을 ​​사용하여 텍스트의 오버플로 효과를 제어할 수 있습니다. text-overflow 속성에는 clip, ellipsis라는 두 가지 선택 값이 있습니다. 그 효과는 다음과 같습니다: 🎜
  • 클립: 텍스트를 자르고 줄임표를 추가하지 않고 초과 부분을 숨깁니다.
  • 줄임표: 텍스트를 자릅니다. 텍스트를 추가하고, 초과된 부분을 숨기고 줄임표 기호(...)를 추가합니다.
🎜따라서 text-overflow 속성 값을 ellipsis 로 설정하여 지나치게 긴 텍스트를 자르고 줄임표를 추가할 수 있습니다. 🎜rrreee🎜5. 의사 요소 사용🎜🎜위의 방법 외에도 CSS의 의사 요소를 사용하여 텍스트가 자동으로 줄 바꿈되지 않도록 제어할 수도 있습니다. 예를 들어 "

위 내용은 CSS는 텍스트 줄바꿈을 방지합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.