CSS의 텍스트 오버플로 속성 요약

구문:
text-overflow : Clip | 줄임표
매개변수:
clip : 생략 기호(...)를 표시하지 않고 단순히 잘라냅니다.
ellipsis : 텍스트를 입력할 때 생략 기호(..)를 표시합니다. .)
설명:
객체 내 텍스트 오버플로를 표시하기 위해 줄임표(...)를 사용할지 여부를 설정하거나 검색합니다.
해당 스크립트 기능은 textOverflow입니다. 제가 쓴 다른 책들도 참조해 주세요.

예:

div { text-overflow : clip; }

CSS2.1에서 텍스트 오버플로 효과를 얻는 방법

좋아 보이는데 테스트해 보겠습니다.

<div style="width:100px;height:20px;text-overflow:ellipsis; ">a b c d e f g h i j k l , msa sd sd sa w df f </div> 
<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">a b c d e f g h i j k l , msa sd sd sa w df f </div>

현재 디스플레이는 정상입니다
text-overflow 속성은 다음과 같습니다. only 텍스트가 넘칠 때 생략 표시를 표시할지 여부를 나타내는 주석입니다. 다른 스타일 속성 정의는 없습니다. 우리는 넘칠 때 줄임표를 생성하는 효과를 얻고 싶습니다. 또한 텍스트를 한 줄에 강제로 표시하고(white-space:nowrap) 오버플로 내용을 숨기도록(overflow:hidden) 정의해야 합니다. 이 방법을 통해서만 오버플로 텍스트에 타원을 표시하는 효과를 얻을 수 있습니다.
1. text-overflow:ellipsis만 정의하면 줄임표 효과를 얻을 수 없습니다.
2. text-overflow:ellipsis; white-space:nowrap;을 정의하면 줄임표 효과를 얻을 수 없습니다. 3. 이 기사에 설명된 방법인 52css.com의 튜토리얼을 따르고 동시에 적용하십시오. text-overflow:ellipsis; white-space :nowrap; Overflow:hidden; 원하는 오버플로 텍스트 표시 줄임표 효과를 얻습니다.

div는 자동으로 너비에 맞게 조정되고 텍스트 오버플로 인스턴스

<style> 
#all{ 
float:center; 
text-align:left; 
overflow: hidden;
} 
#a{ 
float:left; 
text-align:left; 
width:100px;height:50px; 
border:1px solid black; 
text-overflow:ellipsis; 
white-space:nowrap; 
padding-bottom: 10000px;margin-bottom: -10000px;
} 
#b{ 
float:left; 
width:40px;height:50px; 
border:1px solid black;
padding-bottom: 10000px;margin-bottom: -10000px; 
} 
</style>

위 내용은 CSS의 텍스트 오버플로 속성 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!