표 셀에서 텍스트 오버플로 줄임표를 작동시키는 방법은 무엇입니까?

알기 힘든 줄임표: 표 셀에서 CSS 문제 발견

간단한 시나리오를 생각해 보세요. 표 셀 내에 긴 텍스트를 표시하고 너비를 제한하려고 합니다. 50픽셀까지. 당연히 이를 달성하기 위해 CSS 속성(text-overflow: ellipsis, white-space: nowrap 및 설정된 너비)을 사용합니다. 그러나 놀랍게도 줄임표를 찾을 수 없어 당황스럽습니다.

문제를 이해하기 위해 CSS 사양을 자세히 살펴보겠습니다. text-overflow 속성은 기본적으로 테이블 셀이 아닌 인라인 요소에 영향을 미칩니다. 줄임표를 활성화하려면 테이블 셀에 대해 display: block 또는 display: inline-block을 명시적으로 설정해야 합니다. 이렇게 하면 인라인과 유사한 동작이 허용되어 텍스트 오버플로 속성이 적용될 수 있습니다.

또는 다른 접근 방식을 선택할 수도 있습니다. 테이블 레이아웃 설정: 고정; 테이블의 너비를 지정하면 너비가 셀 전체에 고르게 분산됩니다. 이는 또한 셀 내에서 줄임표를 효과적으로 활성화합니다.

이러한 솔루션을 사용한 코드는 다음과 같습니다.

<code class="css">td {
  display: block; /* or inline-block */
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

또는

<code class="css">table {
  table-layout: fixed;
  width: 150px;
}
td {
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

이러한 솔루션 중 하나를 구현하면 다음과 같습니다. 문제를 해결하여 표 셀 내에서 줄임표가 의도한 대로 작동하도록 합니다.

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