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

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

문제

특정 셀에 긴 텍스트가 있는 데이터 테이블에서 셀이 일방적으로 확장되지 않고 확장됩니다. 텍스트를 래핑합니다. 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>

결론

table-layout:fixed 및 word-wrap:break-word를 구현하면 테이블 셀 내에서 텍스트 줄 바꿈을 쉽게 적용할 수 있습니다. 테이블 레이아웃은 텍스트 길이에 관계없이 일관되고 읽기 쉽습니다.

위 내용은 표 셀 내에서 텍스트 줄 바꿈을 강제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!