내 CSS `text-overflow: ellipsis`가 작동하지 않는 이유는 무엇입니까?

CSS 텍스트 오버플로: 줄임표; 작동하지 않나요?

CSS 속성 "text-overflow: ellipsis;" 길이가 사용 가능한 공간을 초과하면 문자열을 자르고 잘린 부분을 줄임표(...) 기호로 바꿉니다. 그러나 항상 예상대로 작동하지 않을 수도 있습니다.

기능 조건:

"text-overflow: ellipsis;" 제대로 작동하려면 다음 조건을 충족해야 합니다.

• 픽셀 제한 너비: 요소의 너비는 픽셀(px) 단위로 지정해야 합니다. 백분율(%)로 표현된 너비는 줄임표 효과를 활성화하지 않습니다.
• 제한된 오버플로 및 공백: 요소에는 "overflow: hide" 및 "white-space: nowrap"이 모두 있어야 합니다. " 설정합니다.

수정 중입니다. 문제:

제공된 코드에서 "a" 요소의 너비가 제한되지 않기 때문에 문제가 발생합니다. 너비가 정의되어 있더라도 요소는 기본적으로 "display: inline"으로 설정되어 지정된 너비 이상으로 확장할 수 있습니다.

이 문제를 해결하려면 다음 중 하나를 사용하여 요소의 너비를 제한해야 합니다. 방법:

• 디스플레이 설정: 디스플레이 속성을 "display: inline-block" 또는 "display: block"으로 변경하여 요소가 지정된 너비 이상으로 확장되지 않도록 합니다.
• 컨테이너 요소 제한: "a" 요소의 컨테이너 요소 중 하나에 "display: block"과 고정 너비 또는 최대 너비를 지정합니다. .
• 요소 부동: "a" 요소에 "float: left" 또는 "float: right"를 적용하여 해당 요소를 제한합니다. width.

현재 레이아웃에 미칠 수 있는 영향을 최소화하기 위해 디스플레이 속성을 "display: inline-block"으로 설정하는 것이 좋습니다.

수정됨 발췌문:

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

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