IT story

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

hot-time 2020. 5. 26. 07:45
반응형

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


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

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

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


원래의 코멘트를 읽기, 러더 포드 찾는되는 크로스 브라우저 포장하는 방법 깨지지 텍스트를 (끊어지지 문자열을 깰 수 있도록 설계 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에서만 테스트되었습니다)


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

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

선적 서류 비치:


white-space: pre-wrap

quirksmode.org/css/whitespace.html


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 */
}

대단히 감사합니다


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

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

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

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


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

참고 URL : https://stackoverflow.com/questions/1638223/is-there-a-way-to-word-wrap-long-words-in-a-div

반응형