CSS가 긴 문자열을 자르고 줄임표를 안정적으로 표시할 수 있습니까?

CSS에서 긴 문자열을 자를 수 있나요?

HTML과 CSS만 사용하여 텍스트를 잘라 동적 콘텐츠를 사전 정의된 문자열에 맞출 수 있습니까? 고정 너비 및 고정 높이 디자인?

역사적으로 텍스트 잘림이 수행되었습니다. 예상 문자 수를 기반으로 하는 서버측. 그러나 이 접근 방식은 다양한 문자 너비로 인해 신뢰할 수 없었습니다. 이 문제를 해결하기 위해 텍스트의 실제 렌더링 너비를 결정할 수 있는 브라우저 기반 솔루션이 모색되었습니다.

처음에는 IE의 text-overflow: ellipsis 속성이 잠재적인 솔루션으로 식별되었습니다. 그러나 이 기능은 다른 브라우저, 특히 Firefox에서는 지원되지 않았습니다.

overflow:hidden과 같은 기술을 사용하는 다양한 CSS 기반 해결 방법이 나타났습니다. 그러나 이러한 방법은 줄임표 표시를 표시하지 못하거나 텍스트가 잘리지 않은 경우에도 표시했습니다.

잠재적 해결책으로 Justin Maxwell은 숨겨진 ellipsis.xml을 사용하는 크로스 브라우저 CSS 기술을 제안했습니다. 파일. 이 방법은 줄임표를 사용하여 효과적으로 텍스트를 자르지만 Firefox에서 텍스트 선택을 방지하는 단점이 있습니다.

업데이트된 솔루션

2011년 Firefox 7 출시와 함께 , text-overflow: ellipsis 속성에 대한 지원이 널리 보급되어 해결 방법이 필요하지 않게 되었습니다. 이 속성을 사용하면 줄임표 표시를 사용하여 정확한 텍스트 잘림이 가능합니다.

또한 Firefox에서 지원을 유지하면서 잘린 노드의 내용을 업데이트하는 기술이 개발되었습니다. 여기에는 컨텐츠가 변경될 때마다 노드를 복제하고 교체하기 위해 교체Ellipsis 기능을 사용하는 것이 포함됩니다.

위 내용은 CSS가 긴 문자열을 자르고 줄임표를 안정적으로 표시할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!