HTML 테이블에서 자동 줄 바꿈 { border:

s와 s로 word-wrap: break-word텍스트를 감싸는 데 사용 했습니다 . 그러나 테이블 셀에서는 작동하지 않는 것 같습니다. 하나의 행과 두 개의 열로 테이블을 설정했습니다 . 위의 스타일로되어 있지만 열의 텍스트는 줄 바꿈되지 않습니다. 텍스트가 셀 경계를 넘어갑니다. 이것은 Firefox, Chrome 및 Internet Explorer에서 발생합니다.divspanwidth:100%word-wrap

소스는 다음과 같습니다.

td {
  border: 1px solid;
}
<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

스 니펫 확장

위의 긴 단어는 내 페이지의 경계보다 큽니다. 그러나 위의 HTML과 충돌하지 않습니다. 나는 추가 아래의 제안을 해봤 text-wrap:suppress하고 text-wrap:normal있지만, 어느 쪽도 도움이되지 않습니다.

답변

다음은 Internet Explorer에서 작동합니다. table-layout:fixedCSS 속성 추가

td {
  border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

스 니펫 확장

답변

<td style="word-break:break-all;">longtextwithoutspace</td>

또는 

<span style="word-break:break-all;">longtextwithoutspace</span>

답변

긴 샷이지만 Firebug (또는 이와 유사한 것)로 실수로 다음 규칙을 상속하지 않았 음을 다시 확인하십시오 .

white-space:nowrap;

지정된 줄 바꿈 동작을 무시할 수 있습니다 .

답변

이 작업을 수행하는 좋은 방법이 없다는 것이 밝혀졌습니다. 가장 가까운 것은 “overflow : hidden;”을 추가하는 것입니다. 테이블 주위의 div에 텍스트를 잃어 버립니다. 실제 해결책은 테이블을 버리는 것 같습니다. div와 상대 위치 지정을 사용하여 기존의 효과를 제외한 동일한 효과를 얻을 수있었습니다.<table>

2015 업데이트 : 이것은이 답변을 원하는 나와 같은 사람들을위한 것입니다. 6 년 후, 모든 기여자 덕분에 효과가 있습니다.

* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}

답변

언급했듯이 텍스트를 div거의 작동시킵니다. 당신은 방금 지정해야 width의를 div정적 레이아웃에 대한 행운이다.

이것은 FF 3.6, IE 8, Chrome에서 작동합니다.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

답변

오버 플로우 랩을 사용하고 일반 테이블 레이아웃 + 테이블 너비 100 %에서 잘 작동하는 해결 방법

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

혜택:

  • overflow-wrap:break-word대신에 사용 합니다 word-break:break-all. 먼저 공백을 끊으려고 시도하고 단어가 컨테이너보다 큰 경우에만 단어를 자르기 때문에 더 좋습니다.
  • 아니 table-layout:fixed필요가 없습니다. 정기적 인 자동 크기 조정을 사용하십시오.
  • 고정 width또는 고정 max-width픽셀 을 정의 할 필요가 없습니다 . %필요한 경우 부모를 정의하십시오 .

FF57, Chrome62, IE11, Safari11에서 테스트

답변

코드 변경

word-wrap: break-word;

에

word-break:break-all;

예

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

스 니펫 확장