WEB 개발에는 종종 텍스트 처리와 관련된 문제가 포함됩니다. 다음은 사용법을 기준으로 요약한 것입니다. 또한 다음과 같이 설명되는 jQuery의 개체 높이 문제도 있습니다.
1. CSS의 관련 텍스트 스타일
1, word-break: Normal | keep-all | break-all
단어 내에서 줄 바꿈을 허용할지 여부를 컨테이너 경계에서 처리하는 방법을 설정하거나 검색합니다. > 일반: 브라우저의 기본 처리 방법
keep-all: 컨테이너 경계를 만나면 단어가 끊어지지 않습니다.
break-all: 컨테이너 경계가 만나면 단어가 깨질 수 있습니다.
2, word-wrap: Normal | break-word
내용이 지정된 컨테이너의 경계를 초과할 때 중단할지 여부를 설정하거나 검색합니다. >normal: 콘텐츠가 컨테이너의 경계를 초과하면 콘텐츠가 깨질 수 있습니다. 컨테이너의 경계를 열거나 오버플로합니다.
break-word: 콘텐츠가 컨테이너의 경계를 초과하면 콘텐츠가 줄바꿈됩니다. 컨테이너 경계;
3, 공백: 일반 | 사전 포장 | 사전 줄
객체 내 공백 처리 방법을 설정하거나 검색합니다. 브라우저의 기본 처리 방법;
pre: 공백을 병합하지 않으며 내용이 컨테이너 경계를 초과하는 경우 줄 바꿈하지 않습니다.
nowrap: 모든 텍스트를 한 줄에 표시하고 초과 공백을 끝까지 병합합니다. 텍스트 또는 br 개체가 발생하는 경우
pre-wrap: 텍스트 사이의 공백을 병합하지 않고 내용이 클 경우 줄 바꿈합니다.
pre-line: 텍스트와 줄 바꿈 사이에 공백을 유지하지 않습니다.
4, text-transform: 없음 | 대문자 | 소문자 | 전체 너비
객체에서 텍스트 검색 또는 설정 없음: 그대로 유지 그대로, 변환 없음;
대문자: 각 단어의 첫 글자를 대문자로 변환합니다.
소문자: 모든 단어를 소문자로 변환합니다. width: 모든 텍스트가 전자 형식으로 변환되며, 해당 전자 형식이 없으면 그대로 유지됩니다.
5, text-overflow: 클립 | 줄임표
검색된 텍스트가 컨테이너의 경계를 초과할 때 처리 방법을 설정합니다.
clip: 내용이 경계를 초과할 때 초과된 부분이 잘립니다. ;
ellipsis : 내용이 경계를 초과하면 초과 부분은 줄임표로 표시됩니다.
참고: 이 속성은 작동하려면 white-space=nowrap,overflow=hidden으로 설정되어야 하며 이 두 속성은
6, text-indent:
객체에서 텍스트 들여쓰기를 검색하거나 설정합니다. ;
길이: 텍스트 들여쓰기는 길이 값을 지정하며 음수일 수 있습니다.
백분율: 텍스트 들여쓰기는 음수일 수 있는 백분율 값을 지정합니다.
매달기: 블록 컨테이너의 첫 번째 줄 또는 내부의 각 강제 줄바꿈의 첫 번째 줄에 들여쓰기 효과를 정의합니다. 부드러운 줄바꿈은 영향을 받지 않습니다.
각 줄: 들여쓰기된 모든 효과 줄을 반전합니다. ;
예: p{text-indent:2emeach-line}
7,line-height: Normal |
normal: 기본적으로 콘텐츠는 지정된 컨테이너를 열거나 종료할 수 있습니다.
length: 지정된 컨테이너를 사용합니다. 행 높이를 지정하는 값(음수 가능)
percentage: 지정된 백분율(음수일 수 있음)로 행 높이를 지정합니다.
number: 곱 계수로 행 높이를 지정합니다. 음수일 수 있습니다.
예:
코드 복사
코드는 다음과 같습니다.