HTML 공백 처리 규칙
HTML의 "공백"에는 공백(space), 탭(tab), 줄 바꿈(CR/LF)의 세 가지 유형이 있습니다.
기본적으로 HTML 소스 코드의 공백 문자는 공백으로 표시되고 여러 개의 연속된 공백 문자가 하나로 처리됩니다. 즉, 여러 개의 연속된 공백 문자가 병합된다는 것을 알고 있습니다.
그러나 때로는 HTML 소스 코드의 여러 연속 공백이 웹 브라우저에서 현실적으로 렌더링될 수 있기를 바라거나 실제 줄 바꿈으로 작동하려면 소스 코드의 줄 바꿈이 필요할 수도 있습니다. 그래서 우리는 내부 텍스트에 있는 공백 문자의 실제 상황을 실제로 복원할 수 있는
태그를 발견했습니다.따라서 우리는 종종 컴퓨터 코드를 나타내는 텍스트 조각을
태그에 넣습니다. 그러면 들여쓰기를 제어하기 위해 추가 스타일과 태그를 추가할 필요 없이 브라우저에 자체 공백 들여쓰기 및 줄 바꿈 효과가 표시됩니다. 그리고 줄 바꿈.CSS에 대한 이해가 계속 깊어짐에 따라 이 모든 것이 공백 속성에 의해 정렬된다는 사실이 밝혀졌습니다.
요소가 그토록 마술적인 이유는 기본 스타일이 {white-space: pre;}이기 때문입니다.공백 속성
CSS 의 공백 속성은 공백 문자 병합 여부, 줄바꿈 유지 여부, 자동 줄 바꿈 허용 여부 등 텍스트 공백 문자에 대한 처리 규칙을 설정하는 데 사용됩니다. 각 속성 값의 다양한 동작은 다음 표에 나와 있습니다.
공백 속성 값 목록
| 속성 값 | 공백 | 개행 문자 | 자동 줄 바꿈 | 에 처음 등장 |
|---|---|---|---|---|
normal | 병합 | 소홀히 하다 | 허용하다 | CSS 1 |
nowrap | 병합 | 소홀히 하다 | 허용되지 않음 | CSS 1 |
pre | 예약하다 | 예약하다 | 허용되지 않음 | CSS 1 |
pre-wrap | 예약하다 | 예약하다 | 허용하다 | CSS 2.1 |
pre-line | 병합 | 예약하다 | 허용하다 | CSS 2.1 |
( 참고 : CSS1/2에서는 공백 속성이 블록 수준 요소에만 적용될 수 있지만 CSS 2.1에서는 모든 요소에 적용될 수 있습니다.)
요소와 유사한 공백 처리 동작을 갖기 위해 컨테이너 요소가 필요한 경우 {white-space: pre;} 스타일을 설정하면 됩니다. 사전 포장이 필요함
먼저 위 표에서 "자동 단어 줄 바꿈" 동작을 설명하겠습니다. 이는 텍스트 방향으로 입력되는 요소 내부의 텍스트 흐름을 말하며 줄 바꿈 여부에 관계없이 지속적인 확장을 제한하는 경계를 만나게 됩니다. 아니다. "단어 줄 바꿈을 허용하지 않음"은 텍스트 흐름이 요소를 오버플로한다는 의미입니다.
따라서 {white-space: pre;} 스타일은 때때로 우리의 기대에 미치지 못하는 경우가 있습니다. 예를 들어, 특별한 엄격함이 요구되지 않는 일부 상황이나 줄 바꿈에 민감하지 않은 일부 코드 조각(예: HTML 또는 CSS)의 형식을 지정할 때 코드 조각에 긴 코드 줄이 발생하는 것을 원하지 않습니다. 읽기 어렵기 때문에 컨테이너 요소를 가로로 스크롤해야 합니다. 이 경우 긴 코드가 자동으로 래핑되기를 바랍니다.
이때 위 표에서 각 속성 값의 다양한 동작 특성을 비교해 보면 pre-wrap 속성 값이 눈에 띄는 것을 알 수 있습니다. 바로 이것이 바로 우리에게 필요한 것입니다.