긴 단어가 내 div를 깨는 것을 방지하는 방법은 무엇입니까?

TABLE-layout에서 DIV-layout으로 전환 한 이후로 한 가지 일반적인 문제가 남아 있습니다.

문제 : 동적 텍스트로 DIV를 채우고 필연적으로 div 열의 가장자리 위로 확장되어 사이트가 비전문적 인 것처럼 보이게하는 매우 긴 단어가 있습니다.

RETRO-WHINING : 테이블 레이아웃에서는 이런 일 이 발생 하지 않았습니다 . 표 셀은 항상 가장 긴 단어의 너비까지 넓게 확장됩니다.

심각도 : 가장 중요한 사이트, 특히 "한계"와 같은 일반적인 단어가 매우 긴 독일어 사이트 ( "Geschwindigkeitsbegrenzung")에서도이 문제가 발생합니다.

누구든지 이것에 대한 실용적인 해결책이 있습니까?

소프트 하이픈

소프트 하이픈 ( ­) 을 삽입하여 브라우저에 긴 단어를 나눌 위치를 지정할 수 있습니다 .

averyvery­longword

로 렌더링 될 수 있습니다

매우 긴 단어

또는

매우
긴 단어

좋은 정규 표현식을 사용하면 필요한 경우가 아니라면 삽입하지 않을 수 있습니다.

/([^\s-]{5})([^\s-]{5})/ → $1­$2

브라우저와 검색 엔진은 텍스트를 검색 할 때이 문자를 무시할 정도로 영리하며, 다른 사람을 테스트하지 않은 Chrome 및 Firefox는 텍스트를 클립 보드에 복사 할 때이를 무시합니다.

<wbr> 요소

또 다른 옵션은 HTML5로<wbr> 된 이전 IE-ism 을 삽입 하는 것입니다 .

averyvery<wbr>longword

하이픈없이 나누기 :

매우
긴 단어

너비가 0 인 공백 문자 ​(또는 &#x200B)를 사용 하여 동일한 결과를 얻을 수 있습니다 .

참고 로 최신 IE, Firefox 및 Safari ( 현재 Chrome은 아님)에서 지원하는 CSShyphens: auto 도 있습니다 .

div.breaking {
  hyphens: auto;
}

그러나 하이픈 넣기 (hyphenation)는 하이픈 딕셔너리 사전을 기반으로하므로 긴 단어를 깰 수는 없습니다. 그래도 정당한 텍스트를 더 예쁘게 만들 수 있습니다.

레트로 솔루션

<table>레이아웃은 좋지 않지만 display:table다른 요소에는 좋습니다. 구식 테이블만큼 기발하고 신축성이 있습니다.

div.breaking {
   display: table-cell;
}

overflow그리고 white-space: pre-wrap아래의 답변이 너무 좋다.

두 가지 수정 사항 :

1. overflow:scroll -이것은 디자인 비용으로 콘텐츠를 볼 수있게합니다 (스크롤바는보기 흉함)
2. overflow:hidden-오버플로를 차단합니다. 그것은 사람들이 내용을 읽을 수 없다는 것을 의미합니다.

(SO 예제에서) 패딩과 겹치지 않게하려면 패딩 내부에 내용을 담기 위해 다른 div를 만들어야 할 것입니다.

편집 : 다른 답변 상태와 같이 단어를 자르는 다양한 방법이 있습니다. 클라이언트 측에서 렌더 폭을 계산하는 것입니다 (이 서버 측은 절대로 안정적으로 작동하지 않으므로 플랫폼 간). JS 및 구분 문자 삽입 또는 비표준 및 / 또는 word-wrap: break-word 거의 호환되지 않는 CSS 태그 사용 ( Firefox에서는 작동하지 않는 것으로 나타남 )

그래도 항상 오버플로 설명자가 필요합니다. div에 너무 넓은 블록 유형의 콘텐츠 (이미지, 테이블 등)가 포함되어 있으면 레이아웃 / 디자인을 파괴하지 않도록 오버플로가 필요합니다.

따라서 다른 방법 (또는 그 조합)을 사용해야하지만 오버플로도 추가해야 모든 브라우저를 포괄 할 수 있습니다.

2를 편집하십시오 (아래 의견을 처리하십시오).

CSS overflow속성을 사용하여 시작하는 것은 완벽하지는 않지만 디자인 중단을 막습니다. overflow:hidden먼저 신청하십시오 . 오버플로는 패딩에서 깨지지 않으므로 중첩 div또는 테두리를 사용하십시오 (가장 적합한 방법).

넘쳐나는 내용을 숨기므로 의미를 잃을 수 있습니다. 을 사용 overflow:auto하거나 overflow:scroll대신에 스크롤 막대를 사용할 수 overflow:hidden있지만 div의 크기와 디자인에 따라 모양이 좋지 않거나 제대로 작동하지 않을 수 있습니다.

이 문제를 해결하기 위해 JS를 사용하여 작업을 취소하고 자동 잘라내기를 수행 할 수 있습니다. 나는 당신을 위해 의사 코드를 작성하는 중반 쯤되었지만 반쯤 진행되면 심각하게 복잡해집니다. 가능한 한 많이 표시해야하는 경우 하이픈에주의를 기울 이십시오 ( 아래 언급 됨 ).

이는 사용자의 CPU 비용으로 발생합니다. 페이지를로드하거나 크기를 조정하는 데 시간이 오래 걸릴 수 있습니다.

우리가 알고 있듯이 이것은 복잡한 문제이며 브라우저간에 일반적인 방식으로 지원되지 않습니다. 대부분의 브라우저는이 기능을 기본적으로 지원하지 않습니다.

사용자 콘텐츠가 사용되었지만 HTML을 지원하지 않는 HTML 전자 메일을 사용한 일부 작업에서 간격이없는 콘텐츠 블록 주위의 래퍼에있는 다음 CSS 비트는 적어도 어느 정도 도움이 될 것입니다.

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

Mozilla 기반 브라우저의 경우 위에서 언급 한 XBL 파일에는 다음이 포함됩니다.

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

불행히도 Opera 8+는 위의 솔루션을 좋아하지 않는 것 같습니다. 따라서 JavaScript는 Mozilla / Firefox와 같은 브라우저에 대한 솔루션이어야합니다. Opera의 최신 버전을 포함하는 또 다른 크로스 브라우저 솔루션 (JavaScript) Hedger Wang의 스크립트를 사용하는 것이 좋습니다 : http://www.hedgerwow.com/360/dhtml/css-word-break.html

다른 유용한 링크 / 생각 :

불일치 한 Babble»블로그 아카이브»Mozilla / Firefox 용 CSS 자동 줄 바꿈
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] Opera에서 줄 바꿈 없음, IE에서 잘 표시됨
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera- users / 2004-November / 024468.html

CSS 크로스 브라우저 워드 랩

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

스타일을 사용하십시오 word-break:break-all;. 테이블에서 작동한다는 것을 알고 있습니다.

지원하는 브라우저에서 word-wrap: break-word작동하지 않습니까?

스타일 시트의 본문 정의에 포함 된 경우 전체 문서에서 작동해야합니다.

오버플로가 좋은 해결책이 아니라면 사용자 정의 자바 스크립트 만 인공적으로 긴 단어를 나눌 수 있습니다.

참고 :이 <wbr>단어 나누기 태그도 있습니다. 이것은 브라우저가 라인을 분할 할 수있는 지점을 제공합니다. 불행히도이 <wbr>태그는 모든 브라우저에서 작동하지 않으며 Firefox 및 Internet Explorer에서만 작동합니다 (CSS 트릭을 사용하는 Opera).

IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows 및 Safari를 방금 확인했습니다.

word-wrap: break-word;

너비가 설정되어 있고 CSS에 오버플로가 선언되지 않은 div 내부의 긴 링크에서 작동합니다.

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

비 호환성 문제가 보이지 않습니다

방금 이 질문 에서 하이픈 넣기 에 대해 알게되었습니다 . 문제가 해결 될 수 있습니다.

많은 싸움을 한 후 이것이 나를 위해 일한 것입니다.

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

최신 버전의 Chrome, Firefox 및 Opera에서 작동합니다.

나는 white-space다른 사람들이 제안한 많은 속성을 배제 했습니다. 실제로 pre들여 쓰기 가 중단 되었습니다.

고정 크기가없고 동적 내용이있는 div에서 다음을 사용하여 작동했습니다.

display:table;
word-break:break-all;

이 주석 에서 정규 표현식을 사용 하면 좋지만 공백이 아닌 하이픈 문자 5 개 그룹 사이에만 수줍음 하이픈을 추가합니다. 이렇게하면 마지막 그룹이 의도 한 것보다 훨씬 길어집니다. 그 뒤에 일치하는 그룹이 없기 때문입니다.

예를 들어,

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

...이 결과는 다음과 같습니다.

abcde­12345678901234

이 문제를 피하기 위해 긍정적 인 예견을 사용하는 버전이 있습니다.

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

...이 결과로 :

abcde­12345­67890­1234

내가이 문제에 일반적으로 사용하는 솔루션은 IE와 다른 브라우저에 대해 두 가지 CSS 규칙을 설정하는 것입니다.

word-wrap: break-word;

IE에서 완벽하게 작동하지만 자동 줄 바꿈 은 표준 CSS 속성이 아닙니다. Microsoft 고유의 속성이며 Firefox에서는 작동하지 않습니다.

Firefox의 경우 CSS 만 사용하는 가장 좋은 방법은 규칙을 설정하는 것입니다.

overflow: hidden;

줄 바꿈하려는 텍스트가 포함 된 요소의 경우 텍스트를 감싸지는 않지만 컨테이너의 한계를 넘는 텍스트 부분을 숨 깁니다 . 모든 텍스트를 표시하는 데 필수적이지 않은 경우 좋은 해결책이 될 수 있습니다 (예 : 텍스트가 <a>태그 안에있는 경우 ).

업데이트 : CSS에서 이것을 처리하는 것은 놀랍도록 간단하고 오버 헤드가 적지 만 중단이 발생할 때 제어 할 수는 없습니다. 신경 쓰지 않거나 데이터가 자연스럽게 중단되지 않고 긴 영숫자 실행이 있으면 좋습니다. 우리는 긴 파일 경로, URL 및 전화 번호가 많았으며 모두 다른 곳보다 침입하기가 훨씬 낫습니다.

우리의 해결책은 먼저 정규식 대체를 사용하여 공백이 아닌 15 자 또는 공백을 선호하는 특수 문자 중 하나 (예 : 15 자)마다 너비가없는 공백 (& # 8203;)을 넣는 것입니다. 그런 다음 특수 문자 다음에 너비가 0 인 공백을두기 위해 다른 대체 작업을 수행합니다.

너비가 0 인 공간은 화면에 표시되지 않기 때문에 좋습니다. 부끄러운 하이픈은 데이터에 중요한 하이픈이 있기 때문에 혼란 스러웠습니다. 브라우저에서 텍스트를 복사 할 때 너비가 0 인 공백도 포함되지 않습니다.

현재 사용중인 특수 구분 문자는 마침표, 슬래시, 백 슬래시, 쉼표, 밑줄, @, | 및 하이픈입니다. 하이픈 다음에 줄 바꿈을 장려하기 위해 어떤 조치도 취할 필요는 없다고 생각하지만 Firefox (최소 3.6 및 4)는 전화 번호와 같은 숫자로 둘러싸인 하이픈에서 그 자체로 중단되지 않습니다.

또한 사용 가능한 레이아웃 공간을 기준으로 인공 나누기 사이의 문자 수를 제어하려고했습니다. 그것은 긴 비정규 실행과 일치하는 정규식이 역동적이어야한다는 것을 의미했습니다. 이것은 많이 불려지고 성능상의 이유로 동일한 동일한 정규 표현식을 반복해서 만들고 싶지 않기 때문에 정규 표현식과 그 플래그로 키가 지정된 간단한 정규 표현식 캐시를 사용했습니다.

코드는 다음과 같습니다. 유틸리티 패키지의 함수 네임 스페이스는 아마도 다음과 같습니다.

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

다음과 같이 테스트하십시오.

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

업데이트 2 : 실제로 는 폭이 0 인 공간 이 복사 된 텍스트에 포함되어 있습니다. 분명히 사람들에게 숨겨진 문자가있는 텍스트를 복사하도록 장려하는 것은 문제를 일으킬 수있는 다른 프로그램이나 시스템에 입력 한 것과 같은 데이터를 갖도록 초대하는 것입니다. 예를 들어, 데이터베이스에서 종료되면 검색에 실패하고 이와 같은 검색 문자열도 실패 할 수 있습니다. 이와 같이 데이터를 이동하기 위해 화살표 키를 사용하려면 보이지 않는 캐릭터를 이동할 수있는 추가 키 누르기가 필요합니다.

닫힌 시스템에서는 입력시 해당 문자를 필터링하여 자신을 보호 할 수 있지만 다른 프로그램과 시스템에는 도움이되지 않습니다.

모두들 말하지만,이 기술은 잘 작동하지만 최고의 깨짐 원인이 무엇인지 확실하지 않습니다.

업데이트 3 : 이 캐릭터가 데이터로 끝나는 것은 더 이상 이론적 인 가능성이 아니며 관찰 된 문제입니다. 사용자가 화면에서 복사 한 데이터를 제출하면 DB에 저장되고 검색이 중단되고 이상한 일이 발생합니다.

우리는 두 가지 일을했습니다.

1. 유틸리티를 작성하여이 앱의 모든 데이터 소스에있는 모든 테이블의 모든 열에서 제거했습니다.
2. 표준 문자열 입력 프로세서로 제거하기 위해 필터링을 추가 했으므로 코드가 인식 할 때마다 사라졌습니다.

이것은 기술 자체와 마찬가지로 잘 작동하지만 경고입니다.

업데이트 4 : 우리는 이것에 공급 된 데이터가 HTML 이스케이프 될 수있는 상황에서 이것을 사용하고 있습니다. 올바른 환경에서 HTML 엔터티 중간에 너비가 0 인 공백을 삽입하여 펑키 한 결과를 얻을 수 있습니다.

다음과 같이 우리가 나누지 않는 문자 목록에 앰퍼샌드를 추가하는 것이 수정되었습니다.

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');

자동 줄 바꿈이 작동하려면 "테이블 레이아웃 : 고정"을 설정해야합니다.

HYPHENATOR가 정답입니다 (위에 제시됨). 귀하의 질문에 대한 실제 문제는 웹 브라우저가 여전히 (2008 년) 하이픈 기능이없는 매우 원시적이라는 것입니다. 우리는 여전히 컴퓨터 사용의 초기 단계에 있습니다. 우리는 인내심을 가져야합니다. 디자이너가 웹 세계를 지배하는 한 실제로 유용한 새로운 기능을 기다리는 데 어려움을 겪을 것입니다.

업데이트 : 2011 년 12 월 현재 FF 및 Safari에서 이러한 태그를 지원하는 또 다른 옵션이 있습니다.

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

몇 가지 기본 테스트를 수행했으며 최신 버전의 Mobile Safari 및 Safari 5.1.1에서 작동하는 것 같습니다.

호환성 테이블 : https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

IE 8 이상과의 호환성을 위해 :

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

여기를 참조하십시오 http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

내가해야 할 일은 너비를 설정 한 div 컨테이너의 스타일에 적용하는 것입니다.

이것을 사용하십시오

word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;

이걸 가지고 있다면-

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

div가 포함 된 세로 형식으로 전환하고 CSS에서 너비 대신 최소 너비를 사용하십시오.

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

물론, 실제 테이블 형식의 데이터를 표시하는 경우 실제 테이블을 의미 적으로 정확하므로 테이블에 있어야하는 스크린 리더를 사용하여 사람들에게 알릴 수 있습니다. 사람들이 당신을 빌려 줄 일반적인 레이아웃이나 이미지 슬라이싱에 사용합니다.

속성이 올바른 순서로 선언되지 않으면 하이픈을 추가하지 않고 잘못된 위치에서 단어를 임의로 중단하기 때문에 다음을 수행해야했습니다.

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

Enigmo가 처음 게시 : https://stackoverflow.com/a/14191114

가능하다면 절대 너비를 설정하고 설정하는 것이 overflow : auto좋습니다.

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

"word-wrap : break-word"는 Firefox 3.5에서 작동합니다 . http://hacks.mozilla.org/2009/06/word-wrap/

이것을 cssdiv에 추가하십시오 .word-wrap: break-word;

모든 단어가 줄 바꿈되고 나면 오버플로를 유지하고 이것이 문제를 해결하는지 확인하십시오. div의 디스플레이를 다음과 같이 변경하십시오.display: inline;

간단한 함수 (underscore.js 필요)-@porneL 답변을 기반으로

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

나는 ­줄 바꿈을 잘하기 위해 단어에 x 문자를 삽입 할 때 잘 작동하는 함수를 작성했습니다 . 여기에있는 모든 답변은 모든 브라우저와 장치를 지원하지는 않지만 PHP를 사용하면 잘 작동합니다.

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}