표 셀 내에서 텍스트 줄 바꿈을 강제하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

표 셀 내에서 텍스트 줄 바꿈을 강제하는 방법은 무엇입니까?

DDD

풀어 주다： 2024-10-27 02:48:30

원래의

452명이 탐색했습니다.

How to Force Text Wrap Within Table Cells?

테이블 셀 내에서 텍스트 줄바꿈을 적용하는 방법

문제

특정 셀에 긴 텍스트가 있는 데이터 테이블에서 셀이 일방적으로 확장되지 않고 확장됩니다. 텍스트를 래핑합니다. CSS 클래스(래핑 가능)가 구현되었지만 문제가 지속됩니다. 테이블이 div 내에 포함되어 있어 div 및 테이블 너비 조작이 필요한지 여부에 대한 의문이 제기됩니다.

해결책

테이블 셀 내에서 텍스트 줄 바꿈을 강제하려면 다음 CSS 속성을 사용하세요.

<code class="css">table {
  table-layout: fixed;
}

td {
  word-wrap: break-word;
}</code>

로그인 후 복사

설명:

table-layout:fixed는 모든 열의 너비가 고정되어 셀이 가로로 확장되는 것을 방지합니다.
word-wrap: break-word는 단어가 너무 길어 열 너비에 맞지 않을 때 텍스트를 나누어 다음 줄로 줄 바꿈합니다.

예

다음은 예입니다. 솔루션 설명:

<code class="html"><style>
  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 310px;
  }

  td {
    border: solid 1px #fab;
    width: 100px;
    word-wrap: break-word;
  }
</style>

<table border="1">
  <tr>
    <td>1</td>
    <td>Lorem Ipsum</td>
    <td>
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry.
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown
    </td>
    <td>
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td></td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna...
    </td>
  </tr>
</table></code>

로그인 후 복사