<td> 안에 공백이없는 텍스트를 어떻게 감싸나요?

나는 사용했다 :

word-break:break-all;
table-layout:fixed;

텍스트는 Chrome에서 줄 바꿈되지만 Firefox에서는 안됩니다.

업데이트 : 랩이 필요하지 않도록 디자인을 변경하기로 결정했습니다. CSS 수정 / 해킹을 분류하려는 시도는 너무 실망스럽고 시간 소모적이었습니다.

이것을 시도해보십시오, 나는 이것이 "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGG"와 같은 것을 위해 작동한다고 생각합니다.

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

저는 Google의 몇 가지 다른 웹 사이트에서 제 예를 가져 왔습니다. ff 5.0, IE 8.0 및 Chrome 10에서 이것을 테스트했습니다.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

CSS3 사용 word-wrap: break-word;. WebKit 기반 브라우저 (Safari, Chrome)에서도 작동합니다.

업데이트 : 문제의 요소는 암시 적으로 또는 명시 적으로 고정 요소로 배치되거나 블록 요소로 표시되어야 함을 잊었습니다. 표 셀 ( td)의 경우 display: inline-block;.

다음은 OP가 요청한 고급 버전입니다.

때때로, 우리의 클라이언트는 우리가 줄 끝까지 단어 분리 뒤에 '-'를주기를 원합니다.

처럼

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

중단하다

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

따라서 지원되는 경우 일반적으로 최신 브라우저에서 지원되는 새로운 CSS 속성이 있습니다.

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

나는 이것을 사용하고있다.

누군가가 이런 수요를 가지길 바랍니다.

자동 테이블 레이아웃의 경우 max-width 및 word-wrap 속성을 결합하여 관련 td의 스타일을 지정하십시오.

예 : <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Firefox 32, Chrome 37 및 IE11에서 테스트되었습니다.

너비가 0 인 공백 (& # 8203;)을 수동으로 삽입하여 중단 점을 만들 수 있습니다.

td태그 의 열 너비를 설정합니다 .

Mozilla와 Netscape를 떠올리게하는 Firefox의 오랜 문제라고 생각합니다. 긴 URL 표시에 문제가 있었을 것입니다. 추악한 해킹없이 CSS로 수정할 수있는 것보다 렌더링 엔진의 문제라고 생각합니다.

디자인을 변경하는 것이 좋습니다.

그러나 이것은 희망적이었습니다 : http://hacks.mozilla.org/2009/06/word-wrap/

내 프로젝트에 Angular를 사용하고 있으며 간단한 필터로이 문제를 해결했습니다.

주형:

<td>{{string | wordBreak}}</td>

필터:

app.filter('wordBreak', function() {
    return function(string) {
        return string.replace(/(.{1})/g, '$1​');
    }
})

당신은 그것을 볼 수 없지만 $1, 보이지 않는 공간 (팁을 위해 @kingjeffrey에게 감사)이 있고, 테이블 셀에 대한 단어 분리를 가능하게했습니다.

이 작업을 수행하는 약간 끔찍한 방법 중 하나는 텍스트를 처리하여 각 문자 사이에 공백을 추가하는 것입니다. 공백을  다음으로 바꾼 다음 문자-간격 css 속성을 사용하여 공백을 줄입니다.

알아요, 해킹입니다 ...하지만 아무것도 작동하지 않으면 문제없이 포장되어야합니다.