브라우저 호환 단어 줄 바꾸기 및 공백 : 예?

Question

div 내에서 텍스트를 보존하고 줄 바꿈해야합니다. 지금까지는 솔루션을 찾는 데 어려움을 겪고 있습니다. 내가 찾은 최선의 해결책은 모든 브라우저에서 작동하지 않습니다.

다음은 Chrome 및 IE6 +에서 작동하지만 Firefox에서는 텍스트가 줄 바꿈되지 않습니다.

white-space: pre; 
word-wrap: break-word; 

는 나는 어떤 이유에서 텍스트가 공백으로 파이어 폭스에 포장하지 않는 것으로 나타났습니다 : 사전. 그리고 -moz-pre-wrap은 Firefox 3.5에서 작동하지 않습니다 (이유는 무엇입니까?). 그러나 목록에 미리 포장을 추가하면 IE 6과 7이 작동하지 않습니다. 매우 실망합니다.

코드 : 우리가 그들을 :) 일하고 싶습니다으로

.introsub { 
    position: relative; 
    top: 30px; 
    left: 25px; 
    width: 550px; 
    font-weight: normal; 
    line-height: 1.5em; 
    overflow: auto; 
    margin: 0; 
    padding: 1.5em; 
    white-space: pre; 
    word-wrap: break-word; 
} 

Answer 1

는 CSS3 속성은 항상 작동하지 않습니다. 그래도 나는 white-space:pre과 word-wrap:break-word을 혼합 할 때 요점을 보지 못합니다.

<br /> 태그가 없으면 전자는 텍스트를 감싸지 않습니다. 두 번째는 반대를 할 것입니다 : 단어 중간 에라도 필요할 때마다 단어를 끊으십시오. 그들은 충돌 것 같다, 다른 브라우저는 이러한 속성에 다르게 반응하는 이유에 대한 가장 확실한 대답은 두 속성 중 하나를 지원

• 가 충돌하기 때문에
• , 우선 순위가 정의되지 않은 또는이다 각 브라우저마다 다릅니다.

(확실하지는 않지만, 저는 전문가가 아닙니다.)

this 및 this을 자세히 살펴본 다음 특정 경우에 사용해야 할 내용을 결정하시기 바랍니다.

[편집] 당신은 (모든 브라우저에서 작동한다)이 시도 할 수 있습니다

:

white-space: -moz-pre-wrap; /* Firefox */ 
white-space: -pre-wrap; /* ancient Opera */ 
white-space: -o-pre-wrap; /* newer Opera */ 
white-space: pre-wrap; /* Chrome; W3C standard */ 
word-wrap: break-word; /* IE */ 

나는이 테스트를하지 않은,하지만 난 당신을 위해 트릭을 할 전망이다.

Answer 2

나는이 문제가 아주 오래되었다는 것을 알고있다. 그러나 나는 그 문제에 직면 한 이래로 나는 대답 할 충동을 느낀다.

내 솔루션은 다음과 같습니다

사용 white-space: pre-wrap;이 거의 white-space: pre;과 동일로, 그냥 줄 바꿈을 추가합니다. (참조 : http://www.quirksmode.org/css/whitespace.html) : 나 브라우저 별 CSS를 해킹과 (http://paulirish.com/2009/browser-specific-css-hacks/)

그럼 내가 특별히 조건부 주석 (http://www.quirksmode.org/css/condcom.html 참조) 중 하나와 오래된 즉을 대상으로한다.

번째 방법의 예 :

.introsub { 
    position: relative; 
    top: 30px; 
    left: 25px; 
    width: 550px; 
    font-weight: normal; 
    line-height: 1.5em; 
    overflow: auto; 
    margin: 0; 
    padding: 1.5em; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
} 

/* IE6 and below */ 
* html .introsub { white-space: pre } 

/* IE7 */ 
*:first-child+html .introsub { white-space: pre } 

이것은 포장 강제로 충분할 것이다.