매우 긴 문자열을 자동 줄 바꿈
div 너비를 유지하기 위해 자동 줄 바꿈이있는 긴 문자열, 웹 사이트 주소, 단어 또는 기호 집합을 표시하려면 어떻게해야합니까? 나는 일종의 단어 줄 바꿈을 추측한다. 일반적으로 공백 추가는 작동하지만 단어 줄 바꿈과 같은 CSS 솔루션이 있습니까?
예를 들어 (매우 심하게) div와 겹치며, 가로 스크롤을 강제합니다. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
div 또는 브라우저 창에서 몇 줄 안에 깔끔하게 맞추기 위해 위의 문자열에 무엇을 추가 할 수 있습니까?
이 질문은 이전에 여기에서 요청되었습니다.
- long-word-breaks-my-div 문제를 누가 해결 했습니까? (힌트 : stackoverflow 아님)
- css / js의 줄 바꿈
- CSS : 긴 문자열 (공백없이)을 XUL 및 / 또는 HTML로 래핑하려면 어떻게해야합니까?
- 긴 URL이있는 CSS 오버플로
짧은 이야기 :
CSS 솔루션에 overflow: scroll;
관한 한, 요소가 스크롤바를 표시하도록 강제하고 overflow:hidden;
추가 텍스트를 잘라 내야합니다. 이 text-overflow:ellipsis;
와 word-wrap: break-word;
있지만 IE는 (있는 break-word
지금에서이 오년에 대한 해결책이 될 수 있도록, 그러나, CSS3 초안에).
요점은 텍스트를 다음 줄로 감싸서 이런 일이 발생하지 않도록하는 것이 매우 중요하다면 ­
(소프트 하이픈), <wbr>
(단어 나누기 태그) 또는 ​
(폭이 0 인 공백, ­
마이너스 하이픈 과 동일한 효과 ) 문자열 서버 측에서. 그러나 Javascript가 마음에 들지 않으면 꽤 견고 해 보이는 하이픈 넣기 도구 가 있습니다.
word-wrap: break-word;
IE7 +, FF 3.5 및 Webkit 지원 브라우저 (Safari / Chrome 등)에서 사용할 수 있습니다. IE6를 처리하려면 다음을 선언해야합니다.word-wrap: break-all;
FF 2.0이 브라우저 매트릭스에 없으면이를 사용하는 것이 실행 가능한 솔루션입니다. 불행히도 단어가 끊어진 앞 줄에 하이픈을 넣지 않는 것은 인쇄상의 악몽입니다. 눈에 띄지 않는 JavaScript 인 Paolo가 제안한 Hyphenator를 사용하는 것이 좋습니다. JavaScript를 사용할 수없는 사용자에 대한 대체는 하이픈이없는 깨진 단어가됩니다. 나는 당분간 그것으로 살 수 있습니다. 이 문제는 웹 디자이너가 입력 할 콘텐츠 또는 줄 바꿈 및 소프트 하이픈이 구현 될 수있는 위치를 제어 할 수없는 CMS에서 발생할 가능성이 높습니다.
CSS3의 하이픈 연결이 논의 된 W3 사양을 살펴 보았습니다 . 불행히도 몇 가지 제안이 있지만 아직 구체적인 것은 없습니다. 브라우저 공급 업체는 아직 아무것도 구현하지 않은 것으로 보입니다. Mozilla와 Webkit에서 독점 코드를 모두 확인했지만 흔적이 없습니다.
word-break:break-all
대접하다
여기에서 이것을 언급 했지만 아마도이 질문과 더 관련이 있습니다. 곧 최고의 속성은 오버플로 랩이 될 것입니다. 구현되는 경우 최고의 가치는 다음과 같습니다.
* {
overflow-wrap:hyphenate.
}
아이폰이나 파이어 폭스에서 글을 쓰는 시점에서 아직 지원되지 않는 것 같고, 오버 플로우 랩 : 하이픈은 작업 초안에도 없습니다.
그동안 나는 다음을 사용합니다.
p {
word-wrap: break-word;
-moz-hyphens:auto;
-webkit-hyphens:auto;
-o-hyphens:auto;
hyphens:auto;
}
디스플레이 : 블록; 오버플로 : 숨김; 텍스트 오버플로 : 줄임표; 너비 : 200px; // 또는 당신에게 가장 적합한 것은 무엇이든
모든 긴 문자열, URL 등을 방지하기 위해 코드를 사용합니다.
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
언젠가 word-wrap
CSS3 : Force Wrapping : the 'word- wrap'property 의 속성에 액세스 할 수 있기를 바랍니다 .
언젠가 ...
일반적으로 Cells는 자연스럽게이 작업을 수행하지만 다음을 사용하여 div에서이 동작을 강제 할 수 있습니다.
div {
width: 950px;
word-wrap: break-word;
display: table-cell;
}
항상 line-height 속성을 지정하십시오. 지정하지 않으면 word-break: break-all;
속성 이 실패 할 수 있습니다 .
이것이 최신 Chrome에서 트릭을 수행하는 것 같습니다.
[the element],
[the element] * {
word-wrap: break-word;
white-space: pre;
}
나는 어떤 브라우저도 확인하지 않았지만 크롬.
참고 URL : https://stackoverflow.com/questions/856307/wordwrap-a-very-long-string
'Programing' 카테고리의 다른 글
Firebase (FCM) how to get token (0) | 2020.10.29 |
---|---|
React JSX 파일에서“Undefined의 'createElement'속성을 읽을 수 없습니다. (0) | 2020.10.29 |
프로그래밍 방식으로 파일 위치를 어떻게 변경할 수 있습니까? (0) | 2020.10.29 |
java : 한 유형에서 다른 유형으로 변수를 동적으로 캐스팅하려면 어떻게해야합니까? (0) | 2020.10.29 |
Eclipse는 자동으로 저장 (0) | 2020.10.29 |