DivCSS 레이아웃을 할 때 텍스트를 조절해야 하는 부분을 오늘은 체계적으로 소개해드리겠습니다. CSS에는 줄 바꿈을 제어하는 네 가지 속성이 있습니다.
1. 공백
HTML에서 PRE 태그의 효과와 셀의 noWrap 효과를 얻을 수 있습니다.
문법:
공백 : 일반 사전 현재 랩
값:
정상: 기본값입니다. 기본 처리 방법. 텍스트는 자동으로 줄바꿈을 처리합니다. 컨테이너 경계에 도달하면 내용이 다음 줄로 이동합니다.
pre: 줄 바꿈 및 기타 공백 문자가 보호됩니다. 이 값을 사용하려면 표준 호환 모드 지원으로 선언된 IE6+ 또는 !DOCTYPE이 필요합니다. !DOCTYPE 선언이 표준 호환 모드를 지정하지 않는 경우 이 속성을 사용할 수 있지만 아무런 효과가 없습니다. 결과는 정상과 동일합니다. 사전 객체 참조
nowrap: 텍스트 끝이나 br 객체가 나타날 때까지 모든 텍스트가 동일한 줄에 표시되도록 합니다. noWrap 속성 참조
설명하다:
객체 내의 공백 문자가 처리되는 방법을 설정하거나 검색합니다.
줄 바꿈, 공백, TAB 등의 공백 문자는 HTML 문서에서 기본적으로 무시됩니다. 이 속성이 Normal 또는 nowrap으로 설정되면 줄바꿈되지 않은 공백이라는 명명된 엔터티를 사용하여 공백을 추가하고 br 요소를 사용하여 줄 바꿈을 추가할 수 있습니다. 이 속성은 IE에서 표시되는 콘텐츠와 마찬가지로 DOM(문서 개체 모델)을 사용하여 조작하는 콘텐츠에도 동일한 효과를 갖습니다.
이 속성은 블록 개체에 적용됩니다.
관련 스타일:
텍스트 오버플로
공백과 결합하면 문자열 길이를 결정하는 프로그램을 작성할 필요가 없습니다. 예를 보려면 여기를 클릭하세요.
문법:
텍스트 오버플로: 클립 줄임표
값:
클립: 기본값. 생략 표시(…)를 표시하지 않고 단순히 자르기만 합니다.
줄임표: 개체 내 텍스트가 넘칠 경우 줄임표(…)를 표시합니다.
설명하다:
개체 내 텍스트 오버플로를 표시하기 위해 줄임표(...)를 사용할지 여부를 설정하거나 검색합니다.
이 속성은 가로 인라인 방향의 일반 서양식 텍스트 오버플로에만 영향을 줍니다. 인라인 오버플로는 줄바꿈할 기회 없이 줄 내의 텍스트가 사용 가능한 너비를 초과할 때 발생합니다.
강제로 오버플로가 발생하고 줄임표 값을 적용하려면 작성자가 개체의 공백 속성을 nowrap으로 설정해야 합니다.
줄 바꿈의 기회가 없는 경우(예: 개체 컨테이너의 너비가 좁고 적절한 줄 바꿈 없이 긴 텍스트가 있는 경우) Nowrap을 적용하지 않고도 오버플로가 가능합니다.
줄임표 값을 적용하려면 보이지 않는 영역을 가진 객체에 이 속성을 설정해야 합니다. 가장 좋은 옵션은 오버플로 속성을 숨김으로 설정하는 것입니다. 이 속성은 오버플로 속성을 스크롤 또는 자동으로 설정한 경우에도 적용됩니다. 그러나 스크롤 막대가 나타납니다.
생략표시를 선택하면 숨겨진 텍스트를 선택할 수 있습니다. 선택이 발생하면 줄임표 표시가 숨겨지고 텍스트로 대체됩니다.
이 속성은 DHTML에서 생략 마크업을 만드는 효율적인 방법을 제공합니다.
2. 단어 나누기
줄 바꿈을 제어하는 데 가장 일반적으로 사용되는 속성은 아래의 단어 줄 바꿈과 함께 사용되는 경우가 많습니다.
문법:
word-break: 일반 break-all 유지-all
값:
정상: 기본값입니다. 단어 사이에 줄 바꿈 허용
break-all: 이 동작은 아시아 언어의 일반적인 동작과 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다.
keep-all: 모든 비아시아 언어의 경우와 동일합니다. 중국어, 한국어, 일본어의 경우 단어 구분이 허용되지 않습니다. 적은 양의 아시아 텍스트가 포함된 비아시아 텍스트에 적합
설명하다:
객체 내의 텍스트에 대한 단어 줄 바꿈 동작을 설정하거나 검색합니다. 특히 여러 언어가 나타날 때.
중국어의 경우 break-all을 사용해야 합니다. [컷 페이지]
3. 줄 바꿈
디자인한 웹 페이지의 너비가 가변적이지 않은 경우 이를 break-word로 설정해야 합니다. 그렇지 않으면 페이지가 엇갈려 표시될 수 있습니다.
문법:
word-wrap : 일반적인 break-word
값:
보통: 기본값입니다. 콘텐츠가 지정된 컨테이너 경계를 넘어 확장되도록 허용
break-word: 콘텐츠가 경계 내에서 중단됩니다. 필요한 경우 단어 분리도 발생합니다.
설명하다:
현재 줄이 지정된 컨테이너의 경계를 초과할 때 줄을 끊을지 여부를 설정하거나 검색합니다.
이 속성은 블록 객체와 같은 레이아웃 객체에서만 작동합니다. 인라인 요소에 이 속성을 사용하려면 먼저 객체의 높이 또는 너비 속성을 설정하거나, 위치 속성을 절대값으로 설정하거나, 표시 속성을 블록으로 설정해야 합니다.
4. 오버플로, 오버플로-x, 오버플로-y
줄 바꿈 스타일을 엄격하게 제어하는 것은 아니지만 숨김으로 설정하면 특정 시점에 자동 줄 바꿈의 단점을 보완할 수 있습니다. 예를 들어 제한된 너비 내에서 텍스트를 한 줄만 표시하고 싶지만 이 줄의 길이는 표시됩니다. 공백+텍스트 오버플로를 결합하면 더 나은 결과를 얻을 수 있습니다.
문법:
오버플로: 보이는 자동 숨겨진 스크롤
값:
표시됨: 기본값입니다. 내용을 자르거나 스크롤바를 추가하지 않습니다. 이 기본값이 명시적으로 선언되면 개체는 포함된 창이나 프레임의 크기에 맞게 잘립니다. 그리고 클립 속성 설정이 유효하지 않습니다
자동: 필요한 경우 개체 내용이 잘리거나 스크롤 막대가 표시됩니다.
숨김: 개체 크기를 초과하는 콘텐츠를 표시하지 않습니다.
스크롤: 항상 스크롤 막대 표시
설명하다:
지정된 높이와 너비를 초과하는 경우 개체의 콘텐츠를 관리하는 방법을 검색하거나 설정합니다.
기본값이 auto인 텍스트 영역 객체와 본문 객체를 제외하고 모든 객체의 기본값이 표시됩니다. 텍스트 영역 객체의 이 속성 값을 숨김으로 설정하면 스크롤 막대가 숨겨집니다.
테이블의 경우 table-layout 속성이 고정으로 설정되면 td 객체는 기본값이 Hidden인 오버플로 속성을 지원합니다. 스크롤 또는 자동으로 설정하면 td 크기를 초과하는 콘텐츠가 잘립니다. 표시로 설정하면 방향 속성 설정에 따라 오른쪽이나 왼쪽 셀에 추가 텍스트가 오버플로됩니다.
이 속성은 IE5부터 MAC 플랫폼에서 사용할 수 있습니다.
IE6부터 !DOCTYPE 선언을 사용하여 표준 호환 모드를 지정할 때 이 속성을 html 객체에 적용할 수 있습니다.