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

CSS 텍스트 오버플로를 사용하여 표 셀의 텍스트 자르기

웹 디자인에서 표 셀 너비를 초과하는 텍스트를 처리해야 함 자주 발생합니다. CSS를 사용하면 간결하고 정리된 표 레이아웃을 유지하면서 줄바꿈을 방지하기 위해 줄임표로 텍스트를 자를 수 있습니다.

문제: CSS 오버플로 및 텍스트 오버플로 속성을 적용하려고 시도함에도 불구하고 표 셀이 계속해서 여러 줄로 줄바꿈되거나 표 너비를 넘어 확장됩니다.

해결책: 줄임표를 사용하여 텍스트를 효과적으로 자르려면 각 테이블 셀(td) 클래스에 대해 max-width 속성도 설정해야 합니다. 이 제약 조건을 사용하면 텍스트가 지정된 너비로 잘릴 수 있습니다.

업데이트된 CSS 코드는 다음과 같습니다.

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

응답성을 보장하려면 max-width: 0px 사용을 고려하세요. 무제한의 유연성을 제공합니다. 또한 포함 테이블의 특정 너비(일반적으로 너비: 100%;)를 설정하고 열 너비를 전체 너비의 백분율로 정의할 수도 있습니다.

예:

table { width: 100%; }
td {
  max-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
td.column_a { width: 30%; }
td.column_b { width: 70%; }

참고: Internet Explorer 9 이하의 경우 렌더링을 수정하려면 다음 HTML을 추가해야 할 수도 있습니다. 문제:

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

다음 단계를 따르면 줄임표를 사용하여 표 셀의 텍스트를 효과적으로 잘라 깔끔하고 제어된 표 레이아웃을 보장할 수 있습니다.

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