CSS를 사용하여 텍스트 오버플로를 해결하는 방법

텍스트 오버플로는 특히 프로그래밍 환경에서 항상 큰 문제입니다. 항상 공간은 한정되어 있지만 그 공간에 가변적인 콘텐츠를 추가할 수 있습니다. 나는 최근에 사용자 정보를 표시하는 데 사용되는 테이블 작업을 하고 있었는데 긴 문자열이 테이블 표시를 깨뜨리는 것을 발견했습니다. 확실한 해결책은 표 셀에 대한 오버플로: 숨김 설정을 추가하는 것입니다. 하지만 그래도 텍스트가 자연스럽게 잘려 보이지는 않습니다. 텍스트 오버플로를 우아하게 만드는 방법은 타원과 CSS의 텍스트 오버플로 속성을 사용하는 것입니다. 보자!

CSS

너비, 줄 바꿈, 오버플로 및 텍스트 오버플로를 포함하여 줄임표 뒤에 CSS를 만드는 것은 매우 간단합니다.

.dataTable td { 
/ * essential * / 
text-overflow ：ellipsis ; 
width： 200px ; 
white-space： nowrap ; 
overflow：hidden ;
/ *外观漂亮* / 
padding： 10px; 
}

너비를 설정하면 경계가 뚜렷해지며, 공백은 일반적인 다음 줄 줄바꿈을 방지하고, 오버플로를 숨기면 보장됩니다. 너비 치수는 이를 준수하기 위해 텍스트 오버플로 설정에서 타원을 제공합니다. 정말 멋지죠? 하지만 문제가 있습니다...

Firefox 및 줄임표

안타깝게도 Firefox는 현재 텍스트 오버플로인 줄임표를 지원하지 않습니다. Dojo 툴킷은 ​​Firefox용 간단한 솔루션인 dojox.html.ellipsis를 제공합니다. 이 리소스는 iFrame 심을 사용하여 타원을 만듭니다. 사용 방법은 다음과 같습니다.

//需要资源 dojo 。require （“dojox.html.ellipsis” ）;

JavaScript 리소스를 요구한 후에는 dojoxEllipsis가 dojox.html.ellipsis 리소스가 이를 생략해야 함을 나타내는 노드를 페이지에 배치해야 합니다.

< div  class = “ dojoxEllpsis ” > Pellentesque居住者morbi tristique senectus et netus et malesuada ... </ div >

dojoxEllipsis DOM 트리가 수정될 때마다 , Dojo는 CSS 클래스가 있는 요소를 페이지에서 검색하고 타원화합니다.

콘텐츠에 동적 줄임표를 구현하는 것은 제한된 콘텐츠 내에서 콘텐츠를 우아하게 관리하는 간단하고 미묘하며 효과적인 방법입니다. 텍스트 오버플로: 줄임표는 Firefox를 제외한 주요 브라우저 공급업체에서 지원됩니다. Dojo의 구현은 안정적이고 효율적이지만 페이지에 타원형 요소가 많으면 페이지 속도가 느려질 수 있습니다. 행복한 타원화!

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