CSS는 텍스트 줄바꿈을 방지합니다.-프런트엔드 Q&A-php.cn

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

1. 공백 속성

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;
}

로그인 후 복사

2. word-break属性

在设置了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;
}

로그인 후 복사

3. overflow属性

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

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

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

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

로그인 후 복사

4. text-overflow属性

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

clip：将文本截断，并隐藏超出部分，不添加省略符号；
ellipsis：将文本截断，并隐藏超出部分，添加省略符号（...）。

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

normal: 기본값, 초과 공백 병합, 텍스트가 줄 바꿈되지 않고 텍스트가 한 줄에 맞지 않으면 자동으로 줄 바꿈됩니다. > nowrap: 줄 바꿈이 없습니다. 이는 normal과 pre의 기능을 결합한 것과 같습니다.
pre< /code>: 여분의 공백을 유지하고 병합하지 말고 줄바꿈하지 마세요. 래핑이 필요한 경우 `<br>`를 수동으로 추가해야 합니다. </li><li><code>pre-wrap< /code>: 초과 공백을 유지하고 병합하지 않음, 자동 줄 바꿈, 줄 바꿈이 필요한 경우 자동으로 줄 바꿈됨 </li><li><code>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-space 및 word-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 중국어 웹사이트의 기타 관련 기사를 참조하세요!