CSS 단어 줄 바꿈이 예상대로 작동하지 않습니다.

Question

아래 예에서 단어 줄 바꿈 속성이 제대로 작동하지 않는 이유는 무엇입니까?

http://jsfiddle.net/k5VET/739/

내가 첫 번째 라인 자체에 맞는 'consectetur'단어의 그 부분을 확인하기 위해 무엇을 할 수 있는가? 각 줄에 최대 글자 수를 입력하고 싶습니다.

는 CSS는 다음과 같습니다

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size:14px; 
    font-weight: normal; 
    line-height: 18px; 
    width: 238px; 
    height:38px; 
    cursor: pointer; 
    word-wrap:break-word; 
    border:2px solid; } 

Answer 1

사용 word-break: break-all;

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size:14px; 
    font-weight: normal; 
    line-height: 18px; 
    width: 238px; 
    height:38px; 
    cursor: pointer; 
word-break: break-all; 
    border:2px solid; } 

LIVE DEMO

Answer 2

브라우저가 야기 할 수있는 방법이 될 것입니다 자동 하이픈 (적용되지 않기 때문에 그것은, 제대로 포장하지 않습니다 적절한 배치). CSS 하이픈 또는 JavaScipt 기반 하이픈을 사용해야합니다. word-wrap:break-word과 word-break: break-all은 정의에 따라 은 올바른 포장 대신 개의 단어 (임의의 숫자로 분할)를 나타냅니다.

Answer 3

모든 브라우저에서 CSS 단어 줄 바꾸기가 작동하지 않기 때문에 대신 JavaScript를 사용하십시오! 동일한 결과를 가져야합니다.

아래 함수는 JQuery가 필요하며 창 크기를 변경할 때마다 실행됩니다.

이 함수는 요소의 너비가 부모보다 큰지 확인하고, 너비가있는 경우 단어 대신 모두를 나눕니다. 우리는 아이들이 부모보다 더 커지 길 바라지 않습니다.

테이블에만 필요하기 때문에 다른 요소에서 사용하려면 "테이블"을 "#yourId"또는 ".yourClass"로 변경하십시오. parent-div가 있는지 확인하거나 "body"또는 무엇인가 "div"를 변경 하시겠습니까?

너무 많은 코드가 그 이유는, 그것은 다른 사람에 갈 경우, 그것은 워드 브레이크로 변경하고 다시 변경해야하는 경우 다음 확인 .. : '/

$(window).on('resize',function() { 
    $('table').each(function(){ 
     if($(this).width() > $(this).parent('div').width()){ 
      $(this).css('word-break', 'break-all'); 
     } 
     else{ 
      $(this).css('word-break', 'break-word'); 
      if($(this).width() > $(this).parent('div').width()){ 
       $(this).css('word-break', 'break-all'); 
      } 
     } 
    }); 
}).trigger('resize'); 

나는 그것이 작동 희망 당신! word-wrap: break-all가 작동하지 않습니다

Answer 4

경우도 시도이 추가 : 부트 스트랩 3이 한 줄의 텍스트를 포장하는 데 유용

Answer 5

에 .btn 클래스와 나를 위해

white-space:normal; 

일 :

#fos { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100%; 
}