내 Span 요소에서 'text-overflow: ellipsis'가 작동하지 않는 이유는 무엇입니까?

"text-overflow: ellipsis"가 작동하지 않음

"text-overflow: ellipsis"를 사용하여 < 내의 텍스트를 자르려고 할 때 ;스팬> 요소에서는 창 크기를 줄이면 줄임표가 표시되지 않습니다.

해결 방법

"text-overflow: ellipsis" 기능을 활성화하려면 다음을 포함해야 합니다. 다음 CSS 속성 외에도 "text-overflow":

• 오버플로: 요소의 콘텐츠가 포함 영역을 초과하고 숨겨지지 않았는지 확인
• 너비(또는 최대 너비 ): 텍스트가 포함될 요소의 최대 너비를 정의합니다. 포함
• 디스플레이: 요소의 표시 유형을 지정합니다(예: 블록, 인라인 블록)
• 공백: 공백 방식을 제어합니다. 요소 내에서 처리됩니다

예 코드

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

설명

제공된 예에서 요소의 너비는 100px로 지정되고 오버플로 속성은 "hidden"으로 설정되어 초과 콘텐츠가 요소 경계 내에 숨겨지도록 합니다. 요소가 직사각형 공간 블록을 차지하도록 하려면 표시 속성을 "block"으로 설정합니다. 마지막으로 공백 속성은 "nowrap"으로 설정되어 텍스트 내에서 줄 바꿈을 방지합니다.

이러한 속성을 적용하면 "text-overflow: ellipsis" 속성이 작동하여 < 내의 텍스트가 잘립니다. ;스팬> 텍스트가 요소 너비를 초과할 정도로 창 크기가 줄어들면 요소에 줄임표(...)를 추가합니다.

위 내용은 내 Span 요소에서 'text-overflow: ellipsis'가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!