텍스트 관련 스타일과 jQuery 객체 높이 및 너비 문제가 각각 설명됩니다_jquery

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: [ hang ||each-line ]
객체에서 텍스트 들여쓰기를 검색하거나 설정합니다. ;
길이: 텍스트 들여쓰기는 길이 값을 지정하며 음수일 수 있습니다.
백분율: 텍스트 들여쓰기는 음수일 수 있는 백분율 값을 지정합니다.

매달기: 블록 컨테이너의 첫 번째 줄 또는 내부의 각 강제 줄바꿈의 첫 번째 줄에 들여쓰기 효과를 정의합니다. 부드러운 줄바꿈은 영향을 받지 않습니다.
각 줄: 들여쓰기된 모든 효과 줄을 반전합니다. ;
예: p{text-indent:2emeach-line}

7,line-height: Normal | 객체의 줄 높이, 즉 텍스트 문자의 가장 낮은 부분부터 위쪽까지의 거리
normal: 기본적으로 콘텐츠는 지정된 컨테이너를 열거나 종료할 수 있습니다.
length: 지정된 컨테이너를 사용합니다. 행 높이를 지정하는 값(음수 가능)
percentage: 지정된 백분율(음수일 수 있음)로 행 높이를 지정합니다.
number: 곱 계수로 행 높이를 지정합니다. 음수일 수 있습니다.

예:




코드 복사


코드는 다음과 같습니다.

여기 텍스트가 컨테이너를 초과하는 경우 , 줄임표, 텍스트... 텍스트... abc666666666666666666666

2. DOM 객체


높이 관련 메서드는 height(), externalHeight(), externalHeight(true)이고 너비 관련 메서드는 width(), externalWidth(), externalWidth입니다. (true)

id=div_id인 div 객체가 있는 경우 다양한 너비와 높이는 다음과 같이 계산됩니다.


코드 복사


코드는 다음과 같습니다.

$("#div_id").height() / $("#div_id").width(); 얻은 값은 div 자체의 높이/너비입니다(패딩, 여백, 테두리 제외) $("#div_id").outerHeight() / $("#div_id").outerWidth() // 포함 div 자체의 높이/너비, 패딩의 상단 및 하단 높이/너비, 테두리의 상단 및 하단 높이/너비(여백의 높이/너비 제외) $("#div_id") .outerHeight(true) / $( "#div_id").outerWidth(true); // div 자체의 높이/너비와 패딩, 테두리 및 여백의 전체 높이/너비를 포함합니다.

예:

코드 복사

코드는 다음과 같습니다.

div 정보: 높이: 30px, 너비: 500px, 패딩:10px 20px; 여백:10px 5px,