매우 긴 문자열을 자동 줄 바꿈

매우 긴 문자열을 자동 줄 바꿈

---

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-wrapCSS3 : 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