CSS를 사용하여 표 셀의 긴 텍스트를 올바르게 자르는 방법은 무엇입니까?

표 셀에서 CSS 텍스트 오버플로를 사용하는 방법

표 셀에 텍스트를 표시하고 싶은 상황이 발생할 수 있습니다. , 하지만 텍스트가 너무 길어서 한 줄에 편안하게 들어갈 수 없습니다. 여러 줄로 줄 바꿈하는 대신 줄임표('...')를 사용하여 텍스트를 자르고 싶습니다.

이를 달성하려면 'text-overflow' 및 'text-overflow'와 같은 CSS 속성을 활용할 수 있습니다. '과다'. 그러나 'white-space: nowrap'을 사용하면 특정 문제가 발생할 수 있습니다. 즉, 텍스트와 해당 셀이 계속해서 오른쪽으로 확장되어 의도한 표 너비를 넘어 확장될 수 있습니다.

이 문제를 해결하려면 각 'td' 클래스에 대한 'max-width' CSS 속성입니다. 'max-width'를 설정하면 오버플로 동작이 예상대로 작동합니다.

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

반응형 레이아웃에서는 'max-width'를 사용하여 열의 최소 너비를 지정할 수 있습니다. 또는 무제한의 유연성을 위해 'max-width: 0'을 사용할 수 있습니다. 또한 포함 테이블의 너비도 설정해야 합니다(예: 너비: 100%). 각 열의 너비를 전체 너비의 백분율로 설정합니다.

table {
  width: 100%;
}

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

td.column_a {
  width: 30%;
}

td.column_b {
  width: 70%;
}

IE 9 이하의 특정 테이블 레이아웃 문제에는 추가 HTML 코드가 필요할 수 있습니다.

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

위 내용은 CSS를 사용하여 표 셀의 긴 텍스트를 올바르게 자르는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!