HTML 표의 자동 줄 바꿈

 

질문 : HTML 표의 자동 줄 바꿈

---

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

소스는 다음과 같습니다.

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:fixed CSS 속성이 추가되었습니다.

 

td {
  border: 1px solid;
  }

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="word-wrap: break-word">
              LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
                  </td>
                    </tr>
                    </table>

출처 : https://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table