줄 바꿈을 비활성화하는 CSS

줄바꿈을 금지하는 CSS

웹 디자인에서 우리는 줄바꿈을 금지해야 하는 상황을 자주 접하게 됩니다. 예를 들어 긴 링크나 이미지 URL을 텍스트에 삽입해야 하는 경우 이러한 링크가 두 줄 이상으로 확장되면 페이지의 미관이 손상되고 사용자의 읽기 환경에 영향을 미칠 수 있습니다. 이 시점에서는 CSS를 사용하여 줄 바꿈을 비활성화해야 합니다.

CSS에는 줄 바꿈을 금지하는 데 사용할 수 있는 두 가지 속성, 즉 "공백"과 "단어 구분"이 있습니다.

1. white-space 속성

white-space 속성은 스타일 요소에서 공백과 줄바꿈을 제어하는 ​​데 사용됩니다.

• normal: 일반적인 상황에서 공백과 줄바꿈을 나타내는 기본값
• nowrap: 줄 바꿈을 금지하지만 공백을 허용합니다.
• pre: 공백과 줄 바꿈을 유지하지만 자동으로 줄 바꿈하지 않습니다.
• pre-wrap: 공백과 줄 바꿈을 유지하고 자동으로 적절한 위치로 줄 바꿈합니다.
• pre-line : 줄 바꿈을 금지하지만 공백은 허용되며 줄은 적절한 위치에서 자동으로 줄바꿈됩니다

nowrap 속성을 사용하여 요소 내에서 줄 바꿈을 금지할 수 있습니다. 예를 들어 다음 예의 텍스트는 강제로 한 줄에 표시됩니다.

<p style="white-space:nowrap;">This is a sample text that will not be wrapped.</p>

2. word-break attribute

word-break 속성은 단어 줄 바꿈 방식을 제어하는 ​​데 사용되며 다음과 같습니다. 값:

• normal: 기본값, 줄바꿈 시 단어를 따르도록 합니다.
• break-all: 단어가 너무 길면 강제로 줄바꿈합니다.
• keep-all: 문자열에 특정 동아시아 문자가 포함된 경우( 중국어, 일본어, 한국어 등), 그러면 단어가 깨지지 않습니다

break-all 속성을 사용하여 요소에서 단어 줄 바꿈을 금지할 수 있습니다. 예를 들어, 다음 예의 긴 URL 링크는 강제로 래핑됩니다.

<p style="word-break:break-all;">https://www.example.com/es?hl=zhcn&tab=rw</p>

공백 및 단어 분리 속성이 한 요소에서 동시에 사용되는 경우 우선순위가 다르다는 점에 유의해야 합니다. 특히 word-break 속성은 공백 속성보다 우선합니다. 즉, 줄 바꿈을 강제하고 모든 공백을 유지하려면 word-break: break-all;을 사용해야 하지만 공백: pre-wrap;은 사용하지 않아야 합니다. -모두;.

또한 실제 사용에서는 이러한 CSS 스타일을 CSS 파일에 추가하고 호출하여 웹 페이지를 아름답게 만드는 목적을 달성할 수 있습니다.

위 내용은 줄 바꿈을 비활성화하는 CSS 기술에 대한 소개입니다.

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