div에서 나오는 텍스트

div에서 나오는 텍스트

---

텍스트 인 경우 공백없이 하고 더 200 픽셀 사업부 크기보다 200 픽셀로 정의가 폭을 흐르는거야 내가 여기에 내 코드를 삽입 한 http://jsfiddle.net/madhu131313/UJ6zG/ 당신은 사진 아래에 볼 수 있습니다 편집 : 내가 원하는 다음 줄로 이동할 텍스트

---

공백이없는 긴 단어가 하나 있기 때문입니다. 줄 바꿈 속성을 사용하여 텍스트를 분리 할 수 ​​있습니다.

#w74 { word-wrap: break-word; }

브라우저 지원도 상당히 훌륭합니다. 여기에 대한 문서를 참조하십시오 .

---

사용하다

white-space: pre-line;

텍스트가 div. 끝에 도달하면 텍스트가 끊어 div집니다.

---

당신은 사용해야 overflow:hidden;또는scroll

http://jsfiddle.net/UJ6zG/1/

또는 PHP를 사용하면 긴 단어를 줄일 수 있습니다.

---

컨테이너 블록 (div)에 다음 CSS 속성을 적용해야합니다.

overflow-wrap: break-word;

사양에 따르면 (소스 CSS | MDN ) :

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

값을 break-world

오버플로를 방지하기 위해 줄에 허용 가능한 중단 점이없는 경우 일반적으로 깨지지 않는 단어가 임의의 지점에서 끊어 질 수 있습니다.

언급 할 가치가있는 ...

이 속성은 원래라는 비표준 및 접두사가없는 Microsoft 확장 word-wrap이었으며 동일한 이름을 가진 대부분의 브라우저에서 구현되었습니다. 그것은 이후에 변경되었습니다 overflow-wrap로, word-wrap별명 인.

---

레거시 브라우저 지원에 관심이 있다면 두 가지를 모두 지정하는 것이 좋습니다.

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

전의. IE9 는 인식하지 overflow-wrap못하지만 잘 작동합니다.word-wrap

---

overflow:auto그것을 사용 하면 div:) 내의 텍스트에 스크롤러가 제공됩니다 .

---

이것이 도움이된다면. 선택기에 값이있는 다음 속성을 추가합니다.

white-space: pre-wrap;

---

나는 최근에 이것을 만났다. 나는 사용했다 :display:block;

---

2 개 또는 3 개의 줄로 감싸 야하는 인스턴스가 하나 인 경우 <wbr>문자열에 몇 개만 사용 합니다. 그것들을 똑같이 취급 <br>하지만 필요하지 않으면 줄 바꿈을 삽입하지 않습니다.

<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>

여기 바이올린이 있습니다.

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/

참고 URL : https://stackoverflow.com/questions/12196885/text-flowing-out-of-div