특정 지점에서 발생해야 하는 경우 HTML 테이블의 줄 바꿈을 제어하는 ​​방법은 무엇입니까?

HTML에서 선호하는 줄 바꿈

웹 콘텐츠를 만들 때 표 내에 텍스트를 표시하는 경우가 많으며, 콘텐츠가 넘치지 않도록 줄 바꿈이 필요합니다. 그러나 특정 지점에서 줄 바꿈이 발생하도록 선호할 수도 있습니다.

기본 중단점 지정

제공된 예에서 테이블 셀에는 다음 항목의 목록이 포함됩니다. 쉼표로 구분된 시리얼. 원하는 동작은 쉼표 뒤, 공백 앞의 줄바꿈입니다. 그러나 HTML은 기본적으로 기본 중단점을 지정하는 방법을 제공하지 않습니다.

줄바꿈되지 않는 공백 방지

줄바꿈되지 않는 공백을 삽입하면 강제로 줄 바꿈이 발생할 수 있습니다. 특정 지점에서 텍스트 너비를 무조건 늘리기도 합니다. 이를 방지하려면 대체 접근 방식이 필요합니다.

Text-Wrap 속성

CSS3은 텍스트 줄 바꿈을 제어할 수 있는 text-wrap 속성을 도입했습니다. 그러나 text-wrap: 피하기를 사용하려는 시도는 예제에서 실패로 판명되었습니다.

Inline Block Display

대신에 display: inline-block 속성을 사용할 수 있습니다. 래퍼 요소와 결합합니다. 이렇게 하면 주변 텍스트와 독립적으로 줄 바꿈할 수 있는 텍스트 "블록"이 셀 내에 효과적으로 생성됩니다.

예

원하는 동작을 구현하려면 다음 CSS 및 HTML을 사용할 수 있습니다:

<code class="css">span.avoidwrap { display:inline-block; }</code>

<code class="html"><td>
  <span class="avoidwrap">Honey Nut Cheerios,</span>
  <span class="avoidwrap">Wheat Chex,</span>
  <span class="avoidwrap">Grape-Nuts,</span>
  <span class="avoidwrap">Rice Krispies,</span>
  <span class="avoidwrap">Some random cereal with a very long name,</span>
  <span class="avoidwrap">Honey Bunches of Oats,</span>
  <span class="avoidwrap">Wheaties,</span>
  <span class="avoidwrap">Special K,</span>
  <span class="avoidwrap">Froot Loops,</span>
  <span class="avoidwrap">Apple Jacks</span>
</td></code>

효과

회피 랩 클래스를 사용하면 시리얼 이름이 함께 유지되고 쉼표에서 줄 바꿈이 발생합니다. 원하는대로. 줄을 더 감싸야 하는 경우 시리얼 이름이 공백에서 끊어집니다.

위 내용은 특정 지점에서 발생해야 하는 경우 HTML 테이블의 줄 바꿈을 제어하는 ​​방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!