CSS를 사용하여 표 셀에서 줄임표로 텍스트를 자르려면 어떻게 해야 합니까?

CSS를 사용하여 표 셀에서 줄임표로 텍스트 자르기

질문:

클립할 수 있나요? 여러 줄로 줄 바꿈하는 대신 줄임표가 있는 테이블 셀의 텍스트 행?

시도한 해결 방법:

CSS 속성을 사용하여 Overflow: Hidden, text-overflow: ellipsis 및 white-space: nowrap이 작동하지 않았습니다.

답변:

표 셀에서 넘쳐나는 텍스트를 성공적으로 잘라내려면 td 클래스에 max-width 속성을 추가해야 합니다:

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

각 표 셀의 최대 너비를 설정하고 다른 속성을 적용하여 텍스트가 지정된 값을 초과할 때 줄임표로 잘립니다. 너비.

반응형 레이아웃에서는 동적 최대 너비를 사용할 수 있습니다.

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

또한 포함 테이블에는 특정 너비가 필요합니다.

table {
  width: 100%;
}

테이블 셀 너비는 백분율로 설정할 수 있습니다.

td.column_a {
  width: 30%;
}
td.column_b {
  width: 70%;
}

이전 버전의 Internet Explorer(IE 9 이상) less), 렌더링 문제를 해결하려면 다음 추가 코드가 필요합니다.

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

위 내용은 CSS를 사용하여 표 셀에서 줄임표로 텍스트를 자르려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!