표 셀에서 줄임표를 사용하여 CSS 텍스트 오버플로를 달성하는 방법은 무엇입니까?

표 셀의 CSS 텍스트 오버플로

표 셀 내에서 텍스트 오버플로를 달성하는 것은 어려울 수 있습니다. 텍스트 오버플로를 사용하는 동안: 줄임표만으로는 충분하지 않을 수 있지만 추가 CSS 속성을 사용하여 원하는 효과를 얻을 수 있습니다.

해결책

줄임표를 사용하여 텍스트를 자르려면 줄 바꿈을 방지하기 위해 각 테이블 셀(td 요소)에 대해 max-width 속성을 설정합니다. 이는 텍스트가 잘리기 전에 텍스트에 사용할 수 있는 최대 너비를 지정합니다. 또한,overflow:hidden은 초과된 텍스트를 숨기도록 보장합니다.

CSS 코드

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

반응형 레이아웃

의 경우 반응형 레이아웃에서는 max-width 속성을 사용하여 열의 유효 최소 너비를 정의할 수 있습니다. 또는 max-width: 0; 무한한 유연성을 허용합니다. 포함 테이블은 특정 너비를 가져야 하며 일반적으로 너비: 100%;로 설정됩니다.

기록 참고

Internet Explorer 9 이하 버전의 경우 추가 렌더링 문제를 해결하려면 HTML에 태그를 포함해야 합니다.

<!--[if IE]>
<style>
  table {
    table-layout: fixed;
    width: 100px;
  }
</style>
<![endif]-->

위 내용은 표 셀에서 줄임표를 사용하여 CSS 텍스트 오버플로를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!