인라인 요소에 대한 Firefox 워드 브레이크

Question

<span> 및 과 같은 특정 인라인 요소에 대한 word-break 속성을 변경하여 페이지 콘텐츠의 흐름을 개선하려고합니다.

Firefox는 블록으로 표시되는 요소 (예 : <div>)에 대해서만 단어 구분 속성을 인식하지만 Chrome은 단어 분리 요구를 존중합니다.

아래 예에서 빨간색과 파란색 부분은 Chrome에서 동일하게 렌더링됩니다 (xxxxx는 여러 줄로 나뉩니다). Firefox에서는 빨간색 상자의 xxxxx가 오버플로됩니다.

<div style="width:200px;background:red;"> 
 
    Hello <span style="word-break:break-all;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World 
 
</div> 
 

 
<div style="width:200px;background:blue;word-break:break-all;"> 
 
    Hello <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World 
 
</div>

예 위에서 : https://jsfiddle.net/7scx4hfq/

정확하게 어떤 브라우저를 행동입니까? Firefox 버그 또는 Chrome 버그입니까?

더 중요한 것은 어떻게 모든 브라우저에서 원하는 효과를 얻을 수 있습니까?

참고, 블록 수준의 word-break:break-all 설정은 옵션이 아닙니다.

Answer 1

Firefox 용으로 word-wrap: break-word;을 추가 할 수 있습니다. 당신은 가능한 한 같은 라인에있는 모든 텍스트를 유지하려면

span { 
    word-break: break-all; /* for others */ 
    word-wrap: break-word; /* for Firefox */ 
} 

, 당신은 용기에 white-space: nowrap;을 설정하고 span에 white-space: normal;으로 재설정 할 수 있습니다. 다시 말하지만, 이러한 설정은 Firefox 용입니다.

jsFiddle