CSS로 문자를 가로채는 여러 가지 방법에 대한 자세한 설명(CSS 조판으로 오버플로 텍스트가 숨겨짐)_CSS/HTML

방법 1:

코드 복사 코드는 다음과 같습니다.

임의 길이의 문자열

참고: 하이퍼링크, 그림 등을 포함한 모든 HTML 요소가 콘텐츠가 될 수 있다는 장점이 있습니다. IE6에서는 끝에 줄임표가 자동으로 표시됩니다. 단점은 너비 값을 지정해야 하며 너비가 백분율이 될 수 없다는 것입니다. 그렇지 않으면 IE에서 전체 문자 길이의 백분율로 간주됩니다.

방법 2:

코드 복사 코드는 다음과 같습니다.

<입력 유형=”텍스트” 스타일 =”너비:100%; 커서:기본값; 테두리 스타일:없음; 배경색:투명;” 값="모든 길이의 문자열" 읽기 전용/>

참고: 너비를 백분율로 설정할 수 있다는 장점이 있습니다. 하지만 단점은 콘텐츠가 일반 텍스트로만 구성될 수 있고 하이퍼링크 및 기타 콘텐츠를 포함할 수 없다는 것입니다.

CSS 문자열 자르기 CSS는 자동 텍스트 자르기를 구현하며 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

div.test{

폭:200px;

높이:14px;

오버플로:숨김;

공백:nowrap;

텍스트 오버플로:줄임표;

text-overflow: 줄임표;/* IE/Safari */

-ms-text-overflow: 줄임표;

-o-text-overflow: 줄임표;/* 오페라 */

-moz-바인딩: url("ellipsis.xml#ellipsis");/*FireFox*/

}

핵심은 text-overflow이며 구문은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

text-overflow:clip | >clip: 줄임표 표시(...)를 표시하지 않고 간단히 자르기
줄임표: 개체가 내부 텍스트를 넘칠 때 줄임표 표시(...) 표시

이 속성은 IE에만 ​​적용된다는 점에 유의하세요! 그러나 IE만 사용할 수 있는 것은 아닙니다. 이 태그는 Guaioh에서 공개적으로 지원 및 채택되지는 않지만 많은 브라우저의 비공개 속성에 포함되어 있습니다. Text-overflow는 단독으로 사용할 경우 작동하지 않습니다. 반드시 white-space:nowrap;overflow:hidden;과 결합해야 합니다. 이전 문장의 기능은 텍스트의 끝이나 br 개체를 만날 때까지 모든 텍스트를 동일한 줄에 표시하도록 하는 것입니다.

text-overflow를 사용하기 가장 좋은 곳은 기사의 텍스트가 아니라 제목이나 초록의 목록을 한 줄에 표시하는 것임을 어렵지 않게 알 수 있습니다.

구문:

코드 복사 코드는 다음과 같습니다.

white-space : Normal | nowrap

값:

코드 복사 코드는 다음과 같습니다.

normal : 기본값입니다. 기본 처리 방법. 텍스트는 자동으로 줄바꿈을 처리합니다. 컨테이너 경계에 도달하면 내용이 다음 줄로 이동합니다.
pre : 줄 바꿈 및 기타 공백 문자가 보호됩니다. 이 값을 사용하려면 표준 호환 모드 지원으로 선언된 IE6+ 또는 !DOCTYPE이 필요합니다. !DOCTYPE 선언이 표준 준수 모드를 지정하지 않는 경우 이 속성을 사용할 수 있지만 아무런 효과가 없습니다. 결과는 Normal 과 동일합니다. pre 객체
nowrap 참조: 텍스트 끝이나 br 객체가 나타날 때까지 모든 텍스트가 동일한 줄에 표시되도록 합니다. noWrap 속성 보기

설명:

오브젝트 내 공백 문자 처리 방법을 설정하거나 검색합니다.

줄 바꿈, 공백, TAB과 같은 공백 문자는 HTML 문서에서 기본적으로 무시됩니다. 이 속성이 Normal 또는 nowrap 으로 설정되면 줄 바꿈되지 않는 이름의 엔터티를 사용하여 공백을 추가하고 br 요소를 사용하여 줄 바꿈을 추가할 수 있습니다. 이 속성은 IE에서 표시되는 콘텐츠와 마찬가지로 DOM(문서 개체 모델)을 사용하여 조작하는 콘텐츠에도 동일한 영향을 미칩니다.

이 속성은 블록 개체에 적용됩니다.

이 속성은 currentStyle 개체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다.

해당 스크립트 기능은 공백입니다.