wordwrap 아주 긴 문자열

StackOverflow https://stackoverflow.com/questions/856307

문제

DIV 너비를 유지하기 위해 자동 선 중단이있는 긴 문자열, 웹 사이트 주소, 단어 또는 기호 세트를 어떻게 표시 할 수 있습니까? 나는 일종의 wordwrap을 생각합니다. 일반적으로 공간이 추가되지만 Word-Wrap과 같은 CSS 솔루션이 있습니까?

For example it (very nastily) overlaps divs, forces horizontal scrolling etc. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

DIV 또는 브라우저 창의 몇 줄 내에서 깔끔하게 맞도록 위의 문자열에 무엇을 추가 할 수 있습니까?

도움이 되었습니까?

해결책

이 질문은 전에 다음과 같이 묻습니다.

짧은 이야기 :

CSS 솔루션이 진행되는 한 : overflow: scroll; 요소가 스크롤 바를 보여 주도록 강요합니다 overflow:hidden; 추가 텍스트를 잘라 내기 위해. 거기 있습니다 text-overflow:ellipsis; 그리고 word-wrap: break-word; 그러나 그들은 IE 일뿐입니다 (break-word 그러나 CSS3 초안에 있으므로 지금부터 5 년 동안 해결책이 될 것입니다).

결론은 다음 줄로 텍스트를 감싸는 데 이런 일이 발생하지 않도록하는 것이 매우 중요하다면 유일한 합리적인 해결책은 주입하는 것입니다. &shy; (소프트 하이픈), <wbr> (단어 브레이크 태그), 또는 &#8203; (제로 폭 공간, 동일한 효과 &shy; 문자열 서버 측에서 마이너스 하이픈). 그러나 JavaScript를 신경 쓰지 않으면 하이픈 꽤 견고한 것 같습니다.

다른 팁

word-wrap: break-word; IE7+, FF 3.5 및 WebKit Enabled 브라우저 (Safari/Chrome 등)로 제공됩니다. IE6을 처리하려면 선언해야합니다 word-wrap: break-all;

FF 2.0이 브라우저 매트릭스에 있지 않은 경우 이들은 실행 가능한 솔루션입니다. 불행히도 그것은 단어가 깨진 선행 선을 과도하게하지 않습니다. 나는 눈에 잘 띄지 않는 JavaScript 인 Paolo가 제안한대로 하이픈을 사용하는 것이 좋습니다. JavaScript가 아닌 사용자의 낙진은 하이픈이없는 깨진 단어가됩니다. 나는 당분간 그와 함께 살 수 있습니다. 이 문제는 웹 디자이너가 어떤 컨텐츠를 입력 할 것인지 또는 라인 브레이크 및 소프트 하이핀을 구현할 수있는 곳을 제어 할 수없는 CMS에서 발생할 수 있습니다.

나는 W3 사양 CSS3에서의 하이픈이 논의되는 경우. 불행히도 그것은 몇 가지 제안이 있지만 아직 구체적인 것은 없습니다. 브라우저 공급 업체는 아직 아직 아무것도 구현하지 않은 것으로 보입니다. 나는 Mozilla와 Webkit을 모두 Proprietory 코드에 대해 확인했지만 어떤 징후도 없습니다.

word-break:break-all 치료를합니다

방금 이것을 언급했습니다 여기 그러나 아마도이 질문과 더 관련이있을 것입니다. 가장 좋은 속성은 곧 오버플로 랩입니다. 그리고 구현되는 최상의 가치는 다음과 같습니다.

* {
   overflow-wrap:hyphenate. 
}

iPhone 또는 Firefox에 글을 쓰는 시점에서는 아직 어떤 식 으로든 지원되지 않는 것 같습니다. 오버플로 랩 : 하이픈은 작업 초안에도 없습니다.

그 동안 내가 사용하는 동안 :

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}

display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; // or whatever is best for you

나는 모든 긴 줄, 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의 속성 : 힘 래핑 : 'Word-Wrap'속성.

언젠가 ...

일반적으로 셀은 이것을 자연스럽게 수행하지만,이 동작을 div에서 강제로 강요 할 수 있습니다.

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}

항상 라인 높이 속성을 지정 - 지정하지 않으면 실패를 일으킬 수 있습니다. word-break: break-all; 재산.

이것이 최신 크롬의 트릭을 수행하는 것 같습니다.

[the element],
[the element] * {
  word-wrap: break-word;
  white-space: pre;
}

브라우저를 확인하지 않고 Chrome을 확인했습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top