줄 바꿈 없는 CSS

웹 디자인에서 CSS(Cascading Style Sheets)는 필수적인 부분입니다. CSS는 웹페이지의 레이아웃, 스타일, 동작을 제어할 수 있습니다. 기본적인 스타일링 터치 중 하나는 텍스트 줄바꿈 방식입니다. 기본적으로 텍스트가 줄 끝에 도달하면 브라우저는 자동으로 다음 줄로 줄 바꿈합니다. 그러나 줄 바꿈 없이 텍스트를 표시해야 하는 경우가 있습니다. 이 기사에서는 CSS를 사용하여 줄 바꿈 효과를 얻는 방법을 소개합니다.

1. 공백 속성

CSS에는 공백 및 줄 바꿈을 포함하여 요소 내의 텍스트가 처리되는 방식을 결정하는 공백 속성이 있습니다. 기본적으로 공백 속성의 값은 일반입니다. 즉, 공백이나 개행 문자를 만나면 줄이 자동으로 줄바꿈됩니다. 그러나 이 속성의 값을 설정하면 줄 바꿈이 없는 효과를 얻을 수 있습니다.

1.white-space:normal

기본적으로 공백 속성 값은 일반입니다. 즉, 요소 ​​내의 텍스트가 공백, 탭, 줄 바꿈 및 기타 표시를 만나면 자동으로 줄 바꿈됩니다. 줄 바꿈 없는 효과를 얻으려면 아래와 같이 속성 값을 nowrap으로 설정해야 합니다.

p {
  white-space: nowrap;
}

이 코드의 의미는 p 요소의 텍스트를 줄 바꿈하지 않도록 설정하는 것입니다.

2. white-space:pre

nowrap 외에도 공백 속성에는 pre와 같은 다른 선택적 값이 있습니다. 공백 속성의 값이 pre이면 브라우저는 공백, 탭, 줄 바꿈 등을 포함하여 요소 내의 텍스트를 미리 형식화된 방식으로 표시합니다. 이 속성 값을 적용하려면 다음과 같이 코드만 변경하면 됩니다.

p {
  white-space: pre;
}

3. white-space:pre-wrap

또 다른 값은 pre-wrap으로, 자연스러운 선을 유지하면서 일부 줄 바꿈을 강제할 수 있습니다. 미리 형식이 지정된 공백 또는 개행. 예를 들어 다음 코드는 각 단어 사이에 두 개의 공백을 추가합니다.

p {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-spacing: 2px;
}

pre-wrap 속성을 사용할 때 word-wrap 속성과 word-spacing 속성을 설정하여 텍스트 표시를 추가로 제어할 수도 있습니다.

2. 텍스트 오버플로 속성

공백 속성 외에도 줄바꿈을 없애기 위해 일반적으로 사용되는 CSS 속성인 텍스트 오버플로도 있습니다. 이 속성은 인라인 요소나 블록 요소에서 지나치게 긴 텍스트를 자르고 줄임표로 표시하여 어느 정도 줄 바꿈이 없는 효과를 얻는 데 사용됩니다.

text-overflow 속성에는 세 가지 선택적 값이 있습니다.

1. ellipsis: 줄임표
2. clip: 텍스트 자르기
3. string: 사용자 정의 문자열

다음 코드는 text-overflow 속성을 사용하여 지나치게 긴 텍스트를 제거하는 방법을 보여줍니다. 텍스트는 잘리고 줄임표로 표시됩니다.

p {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

이 예에서는 먼저 요소의 너비를 150픽셀로 설정한 다음 텍스트가 줄 바꿈되지 않도록 공백 속성을 nowrap로 설정했습니다. 다음으로, 요소 경계를 넘어 확장되는 텍스트 부분이 숨겨지도록 오버플로 속성을 숨김으로 설정합니다. 마지막으로 잘린 텍스트가 타원으로 표시되도록 text-overflow 속성을 ellipsis로 설정합니다.

3. word-break 속성

word-break 속성은 텍스트 줄바꿈 방식을 제어하는 ​​데 사용됩니다. 공백으로 단어가 구분된 영어 및 기타 텍스트에만 유효하며, 공백이 없는 중국어 및 기타 텍스트에는 작동하지 않습니다.

word-break 속성에는 세 가지 선택적 값이 있습니다.

1. normal: 기본 줄 바꿈 규칙을 사용합니다. 즉, 단어가 두 개 이상의 줄로 분할되지 않습니다.
2. break-all: 단어 내에서 텍스트를 분리합니다.
3. 모두 유지: 주요 문자(예: 한자, 가타카나, 타니 음절) 사이에만 줄 바꿈합니다.

다음 코드는 word-break를 사용하여 텍스트 줄 바꿈 방법을 제어하는 ​​방법을 보여줍니다.

p {
  width: 100px;
  word-break: break-all;
}

이 예에서는 p 요소의 너비를 100픽셀로 설정한 다음 word-break 속성을 break-all로 설정합니다. , 단어 내에서 텍스트를 나누는 데 사용됩니다.

요약

위는 본 글에서 소개하는 CSS Non-Line Wrapping 방법으로, 공백 속성, 텍스트 오버플로 속성, 단어 구분 속성이 포함됩니다. 실제 웹 디자인에서는 페이지 스타일과 레이아웃 효과를 얻기 위해 특정 요구에 따라 이러한 속성을 유연하게 사용할 수 있습니다.

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