CSS3 word-break Firefox와 Chrome 출력이 다릅니다.

Question

word-break을 사용하여 부모의 너비를 초과하는 긴 문자로 단어를 어기려고합니다.

이 예에서는 이 width:43px이고 단어가 "재생"되어 있습니다. 크롬에서는 단어가 맞지만 Firefox에서는 단어가 두 줄로 나뉩니다.

크롬 스크린 샷

파이어 폭스 스크린 샷 여기

http://jsfiddle.net/chenx/7rYAm/

jsfiddle, 당신은보고 파이어 폭스와 크롬 모두에서 엽니 다 시도 할 수있다 차. 내가 원했던 것은, 둘 다 동일한 결과를 산출한다는 것입니다. Chrome을 올바른 결과로 선호합니다.

이것은 내 앱에 영향을 미칠 수 있습니다.보기를 캔버스로 캡쳐하고 고객이 브라우저 간의 출력 차이에 대해 불만을 제기하고 싶지 않기 때문입니다. 가장 좋은 방법은 무엇입니까? word-break을 여러 브라우저에서 표준화 할 수 있습니까?

감사합니다.

Answer 1

단어 분리가 표준화되었습니다. 표준화되지 않은 것은 "놀이"라는 단어가 얼마나 넓습니까? 사용 된 글꼴, 사용 된 정확한 글꼴 래스터 화 알고리즘, 앤티 앨리어싱 설정 등에 따라 다릅니다.

Windows에서 Firefox와 Chrome은 서로 다른 래스터 화 및 앨리어싱 제거 동작을 가지며 텍스트의 너비가 다른 두 가지 OS 제공 글꼴 서브 시스템 (GDI 및 DirectWrite)을 사용합니다.

이와 같은 상황에서 가장 좋은 방법은 부모에게 지나치게 작은 너비를 사용하지 않는 것입니다. 시력이 좋지 않은 사용자가 요청한 것보다 큰 글꼴을 사용하면 어떻게되는지 테스트하는 것이 좋습니다.

Answer 2

이것은 브라우저가 자신의 일을하는 것에 대해 내가 싫어하는 것입니다. Firefox는 word-break: keep-all을 사용합니다. 반면에 Chrome은 word-break: break-word을 사용합니다.