>  기사  >  웹 프론트엔드  >  내 텍스트 오버플로 줄임표가 작동하지 않는 이유는 무엇입니까?

내 텍스트 오버플로 줄임표가 작동하지 않는 이유는 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-11-10 19:05:02298검색

Why Isn't My Text Overflow Ellipsis Working?

텍스트 오버플로 줄임표가 작동하지 않음

text-overflow 속성은 표시된 텍스트를 자르고 줄임표(...)를 추가하기 위한 것입니다. 전체 텍스트가 표시되지 않음을 나타냅니다. 그러나 이 속성이 예상대로 작동하지 않는 경우 여러 주요 CSS 속성이 제자리에 있는지 확인하는 것이 중요합니다.

필수 CSS 속성:

제대로 활성화하려면 text-overflow: 줄임표 효과, 다음 CSS 속성이 있어야 합니다. 정의됨:

  • 디스플레이: 디스플레이 속성을 "block" 또는 "inline-block"으로 설정하여 텍스트가 화면의 공간을 차지하도록 합니다.
  • 공백: 공백 사용: nowrap을 사용하면 텍스트가 여러 줄로 넘어가는 것을 방지할 수 있습니다. 라인.
  • 오버플로: 컨테이너 너비를 초과하는 텍스트 부분을 숨기려면 오버플로를 "숨김"으로 설정합니다.
  • 너비(또는 최대 너비 ): 고정 너비(또는 최대 너비)를 지정하여 사용 가능한 공간을 제한합니다. text.

올바른 코드가 포함된 데모:

다음 CSS 스니펫은 필요한 코드를 올바르게 적용하는 방법을 보여줍니다. 속성:

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

예:

<span>Test test test test test test</span>

이러한 속성을 구현하면 지정된 텍스트가 잘리고 컨테이너가 텍스트에 있을 때 줄임표가 표시되도록 할 수 있습니다. 너비가 너무 좁아 전체 텍스트를 수용할 수 없습니다.

위 내용은 내 텍스트 오버플로 줄임표가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.