div에서 긴 단어를 단어 줄 바꿈하는 방법이 있습니까?


173

Internet Explorer에는 자동 줄 바꿈 스타일이 있지만 div의 텍스트에 브라우저 간 방법이 있는지 알고 싶습니다.

CSS는 바람직하지만 JavaScript 스 니펫도 정상적으로 작동합니다.

편집 : 예, 긴 줄을 언급, 사람들을 응원!


7
자동 줄 바꿈은 기본적으로 발생합니다. 별도의 단어 가 없을 때 줄 바꿈을 의미 합니까?
Quentin

답변:


313

원래의 코멘트를 읽기, 러더 포드 찾는되는 크로스 브라우저 포장하는 방법 깨지지 텍스트를 (끊어지지 문자열을 깰 수 있도록 설계 IE에 대한 줄 바꿈 자신의 사용에 의해 추정).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

나는이 클래스를 조금 사용했고 매력처럼 작동합니다. (참고 : FireFox 및 IE에서만 테스트되었습니다)


이전 게시물이지만 IE가 쿼크 모드에 있으면 공백을 렌더링하지 않는 것 같습니다.
제레미

2
Firefox 24.6.0을 사용하고 있으며 word-wrap: break-word실제로 작동합니다.
user545424

3
Word-wrap: break-word비록 마이크로 소프트에 의해 생성되었지만 이제는 CSS 3 표준의 일부이며 트릭을 수행하는 것입니다 :-)
Pascal_dher

38

Firefox 38.0.5에서는 이전 답변의 대부분이 작동하지 않았습니다. 이것은 ...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

선적 서류 비치:


2
감사! 이것이 효과가있는 유일한 대답입니다 (단어 구분 : break-all; 저에게 효과가 있습니다)
DaniCE


12

Aaron Bennet의 솔루션이 완벽하게 작동하지만 코드 에서이 줄을 제거해야했습니다.> white-space: -pre-wrap;오류가 발생했기 때문에 최종 작업 코드는 다음과 같습니다.

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

대단히 감사합니다


1
Aaron Bennett은 2 년 전에 이와 동일한 답변을 언급했습니다. 여기서 당신이 한 일은 가치를 부가하지 않습니다.
AaA

6
안녕하세요, 당신이 두 가지 답변을 다시 읽었는지 알 수 있듯이, 아론의 해결책이 괜찮다는 것입니다. 나를. 어쩌면 내가 그의 대답에 코멘트를해야한다, 나는 그것을 죄송 및 감사 알
휴고

나는이 "공백 : - 전 랩"을 추가했다 그것은 :) 일
라비 Khambhati에게

0

david가 언급했듯이 DIV 기본적으로 단어를 줄 바꿈합니다.

공백없이 실제로 긴 문자열을 참조하는 경우 문자열 서버 측을 처리하고 빈 범위를 삽입합니다.

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

글꼴 크기 등의 문제가 있기 때문에 정확하지 않습니다. 컨테이너의 크기가 가변적 인 경우 span 옵션이 작동합니다. 너비가 고정 된 컨테이너 인 경우 계속해서 줄 바꿈을 삽입 할 수 있습니다.


@TomHert 정말 이상합니다. 그래도 IE는. 절대 작동하지 않습니다. 즉, 이것은 5 년 전에 게시되었습니다. CSS3에는 IE가 developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
DA를 수용

그래, 나는 그것을 시도해야한다는이 솔루션의 단순성에 충격을 받았다 :)
Tom Hert

0

div의 너비를 픽셀, 백분율 또는 ems로 지정하면 해당 div는 해당 너비로 유지되며 텍스트는 div 내에서 자동으로 줄 바꿈됩니다.


10px 너비를 설정 한 다음 10px보다 긴 단어를 사용하십시오
Paul Zahra
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.