안에 공백이없는 텍스트를 어떻게 줄 바꿈합니까?

안에 공백이없는 텍스트를 어떻게 줄 바꿈합니까?

---

나는 사용했다 :

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;.

---

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

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

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

---

다음은 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;

}

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

누군가가 이런 수요를 갖기를 바랍니다.

---

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

---

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

---

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

I know, it's a hack... but if NOTHING else works, it should wrap without problem.

---

I think this is a long standing issue in Firefox, that harks back to Mozilla and Netscape. I'll bet you were having the issue with the display of long URLs. I think it is an issue with the rendering engine rather than something you can fix with CSS, without some ugly hacks.

Makes sense to change the design.

This looked hopeful though: http://hacks.mozilla.org/2009/06/word-wrap/

---

I'm using Angular for my project, and managed to solve this with a simple filter:

Template:

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

Filter:

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

---

You can't see it, but after $1 there is an invisible space (thanks @kingjeffrey for the tip), which enabled word breaks for table cells.

참고URL : https://stackoverflow.com/questions/3247358/how-do-i-wrap-text-with-no-whitespace-inside-a-td