HTML 테이블에서 자동 줄 바꿈

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>

문제

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

텍스트 에 공백 이 있을 때 잘 작동하지 않는다는 것입니다.

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

단어 andthenlongerwithoutspaces가 한 줄에 표 셀에 들어가지만 long text with andthenlongerwithoutspaces그렇지 않으면 긴 단어는 줄 바꿈 대신 두 줄로 나뉩니다.

대체 솔루션 : 매 20 자마다 긴 단어마다 U + 200B ( ZWSP ), U + 00AD ( 소프트 하이픈 ) 또는 U + 200C ( ZWNJ )를 삽입하십시오 (단, 아래 경고 참조).

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

경고 : 길이가 0 인 추가 문자를 삽입해도 읽기에는 영향을 미치지 않습니다. 그러나 클립 보드에 복사 한 텍스트에는 영향을 미칩니다 (물론 이러한 문자도 복사됩니다). 클립 보드 텍스트가 나중에 웹 앱의 일부 검색 기능에서 사용되면 검색이 중단됩니다. 이 솔루션은 일부 잘 알려진 웹 응용 프로그램에서 볼 수 있지만 가능하면 피하십시오.

경고 : 추가 문자를 삽입 할 때 grapheme 내에서 여러 코드 포인트를 분리하지 않아야합니다. 자세한 내용은 https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries 를 참조 하십시오 .

이 데모를 확인하십시오

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

읽을 링크는 다음과 같습니다

IE 8 및 Chrome 13에서 테스트되었습니다.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

이렇게하면 테이블이 페이지 너비에 맞고 각 열이 너비의 50 %를 차지합니다.

첫 번째 열이 더 많은 페이지를 차지하도록 하려면 다음 예에서와 같이 a width: 80%를 추가 td하여 80 %를 선택한 백분율로 바꿉니다.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

수행해야 할 유일한 것은 달성하려는 레이아웃에 따라 내부 <td>또는 <div>내부에 너비를 추가하는 것입니다 <td>.

예 :

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

또는

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

현상금을 얻은 답은 정확하지만 테이블 의 첫 번째 행에 병합 / 결합 된 셀이 있으면 작동하지 않습니다 (모든 셀의 너비가 동일 함).

이 경우 colgroup및 col태그를 사용하여 올바르게 표시해야합니다.

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

너비가 아닌 지정된 너비 word-wrap:break-word;로 블록 요소 ( div) 를 설정해야합니다 . 전의:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

또는 word-break:break-allAbhishek Simon의 제안에 따라 사용하십시오.

이것은 나를 위해 작동합니다 :

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

그리고 테이블 속성은 다음과 같습니다

   table {
      table-layout: fixed;
      width: 100%
   }

</style>

표 테두리가 필요하지 않은 경우 다음을 적용하십시오.

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Firefox, Google Chrome 및 Internet Explorer 7-9에서 작동하는 것으로 나타났습니다. 한쪽에 긴 텍스트가있는 2 열 테이블 레이아웃을 수행합니다. 비슷한 문제를 찾기 위해 모든 것을 검색했으며 한 브라우저에서 다른 브라우저가 작동하거나 테이블에 더 많은 태그를 추가하는 것은 나쁜 코딩처럼 보입니다.

나는 이것을 위해 테이블을 사용하지 않았다. 구조에 DL DT DD. 최소한 2 열 레이아웃을 수정하기 위해 기본적으로 용어집 / 사전 / 단어 의미 설정입니다.

그리고 일반적인 스타일링.

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

떠 다니는 줄 바꿈과 여백을 사용하여 필요한 것을 정확히 얻었습니다. 내가 이것을 다른 사람들과 공유 할 것이라고 생각했을 것입니다. 아마도 줄 바꿈하는 데 어려움이있는 2 열 정의 스타일 레이아웃을 가진 다른 사람을 도울 것입니다.

표 셀에서 단어 줄 바꿈을 사용해 보았지만 Internet Explorer 9 (및 Firefox 및 Chrome)에서만 작동했습니다. 주로 깨진 Internet Explorer 브라우저를 수정하려고했습니다.

표는 기본적으로 줄 바꿈되므로 표 셀의 표시가 다음과 같은지 확인하십시오 table-cell.

td {
   display: table-cell;
}

style = "table-layout : fixed; width : 98 %; word-wrap : break-word"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

데모-http: //jsfiddle.net/Ne4BR/749/

이것은 나를 위해 잘 작동했습니다. 웹 브라우저에서 테이블이 100 %를 초과하는 링크가 길었습니다. IE, Chrome, Android 및 Safari에서 테스트되었습니다.

Internet Explorer에서 테스트되지 않은 Chrome 및 Firefox에서 작동하는 솔루션 display: table-cell은 블록 요소 로 설정 하는 것입니다.

당신에게 적합하다면 이것을 시도 할 수 있습니다 ...

텍스트 영역을 td 안에 넣고 배경색을 흰색으로 비활성화하고 행 수를 정의하십시오.

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>