DIV에서 긴 단어를 줄 바꿈하는 방법은 무엇입니까?

좋아, 이건 정말 혼란스러워. div 안에 다음과 같은 내용이 있습니다.

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

그러나 '단어'가 너무 길어서 콘텐츠가 예상대로 DIV를 오버플로합니다.

브라우저가 모든 내용에 맞는 단어를 '파손'시키려면 어떻게해야합니까?

사용하다 word-wrap:break-word;

IE6에서도 작동하며 이는 놀라운 놀라움입니다.

word-wrap: break-wordoverflow-wrap: break-word;모든 최신 브라우저에서 작동하는 것으로 대체되었습니다 . 죽은 브라우저 인 IE는 word-wrap대신 더 이상 사용되지 않는 표준에 의존 합니다.

word-wrap오늘날의 기존 용도 overflow-wrap는 사양에 대한 별칭이므로 여전히 작동 합니다.

브라우저 호환성에 대해 잘 모르겠습니다

word-break: break-all;

또한 당신은 <wbr>태그를 사용할 수 있습니다

<wbr>(단어)는 "원하는 경우 브라우저가 여기에 줄 바꿈을 삽입 할 수 있음"을 의미합니다. 브라우저는 줄 바꿈이 필요하다고 생각하지 않습니다.

이것은 '크로스 브라우저'솔루션에 허용되는 답변에 추가 될 수 있습니다.

출처 :

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

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

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

방금 동일한 문제를 인터넷 검색하고 최종 솔루션을 여기에 게시했습니다. . 이 질문과도 관련이 있습니다.

div에 스타일을 지정하여 쉽게 수행 할 수 있습니다 word-wrap: break-word(너비도 설정해야 할 수도 있음).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

그러나 테이블의 경우 다음을 적용해야합니다 table-layout: fixed.. 이는 열 너비가 더 이상 유동적이지 않지만 첫 번째 행의 열 너비 만 (또는 지정된 너비를 통해) 정의됨을 의미합니다. 자세한 내용은 여기를 참조하십시오 .

샘플 코드 :

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

​줄 바꿈 기회를 지정하는 보이지 않는 문자 인 ZWSP (제로 폭 공백)라는 유니 코드 문자의 HTML 엔터티입니다. 마찬가지로 하이픈의 목적은 단어 경계 내에 줄 바꿈 기회를 지정하는 것입니다.

flexbox를 사용하고에 의존 할 때 Firefox (v50.0.2)를 제외한 대부분의 주요 브라우저 (Chrome, IE, Safari iOS / OSX)에서 다음을 사용하는 것이 효과가 있음을 발견했습니다 width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

참고 : 자동 접두사를 사용하지 않는 경우 브라우저 공급 업체 접두사를 추가해야 할 수도 있습니다.

주의해야 할 또 다른 사항  은 간격에 사용 하는 텍스트 가 단어 중간 줄 바꿈을 일으킬 수 있다는 것입니다.

CSS word-wrap:break-word; , 파이어 폭스 3.6.3에서 테스트

아래 코드로 문제를 해결했습니다.

display: table-caption;

없애다 white-space: nowrap 경우 .

도구:

white-space: inherit;
word-break: break-word;

공백은 브라우저에 의해 유지됩니다. 필요한 경우 텍스트가 줄 바꿈됩니다.

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

데모

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

에서 MDN :

overflow-wrapCSS 속성 지정 여부 브라우저는 컨텐츠 상자를 넘쳐에서 텍스트를 방지하기 위해 단어 내에서 줄 바꿈을 삽입해야한다.

대조적으로 word-break, overflow-wrap전체 단어가 넘쳐없이 한 줄에 배치 할 수없는 경우에만 휴식을 만들 것입니다.

따라서 다음을 사용할 수 있습니다.

overflow-wrap: break-word;

사용할 수 있습니까 ?

먼저 요소의 너비를 식별해야합니다. 예 :

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

텍스트가 요소 너비에 도달하면 줄로 나뉩니다.

davidcondrey의 답변 @에서 언급 한 바와 같이, 단지 ZWSP이 없을뿐만 아니라 SHY ­ ­매우 긴에서 사용할 수,이 구성 단어 (독일어, 네덜란드어 생각) 그 자리에서 깨진 것으로 당신 이 원하는. 보이지는 않지만 필요한 순간에 하이픈을 제공하므로 단어를 연결하고 줄을 최대한 채우십시오.

그런 식으로 단어 luchthavenpolitieagent 가lucht­haven­politie­agent 의 음절보다 긴 부분을 제공하는 것으로 표시 될 수 있습니다 .
나는 그것에 대해 아무것도 공식을 읽어 본 적이 있지만,이 소프트 하이픈 (구조물의 하나의 단어에 공식 하이픈 이상의 브라우저에서 더 높은 우선 순위를 얻을 관리하는 경우 가 전혀 그것에 대한 몇 가지 확장자가).
실제로, 브라우저는 그렇게 길고 길게 만들어진 단어 자체를 깰 수 없습니다. 더 작은 화면에서는 새로운 줄을 만들거나 경우에 따라 한 줄로 구성됩니다 (구성된 단어 중 두 개가 뒤따를 때와 같이).

참고 : 공항 경찰관을위한 네덜란드 사람입니다.

단어 구분 : EN과 같이 구분 단어가 처음에 끊어지기 때문에 일반 단어 구분 : 구분 단어보다 사용하는 것이 더 좋습니다.

word-break: normal

이 작업을 수행:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

우리 스타일로 이것을 시도하십시오

white-space: normal;