CSS word-wrap beklendiği gibi çalışmıyor

Question

Neden wrap özelliği aşağıdaki örnekte düzgün çalışmaz?

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

i ilk satırında kendisi uyuyor 'consectetur' kelimesi o kısmını sağlamak için neler yapabiliriz? Her satıra sığacak maksimum sayıda karakter istiyorum.

css geçerli:

#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

Kullanım 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

tarayıcılar neden yol olacaktır otomatik tire (geçerli değildir, çünkü düzgün kaydırma değil uygun sarma) varsayılan olarak. CSS heceleme veya JavaScipt tabanlı tireleme kullanmanız gerekir. word-wrap:break-word'un yanı sıra numaralı no'lu ayar sözcüklerini (doğru arma yerine parçalara ayırır) tahrif ediyor.

Answer 3

Css sözcüğü tüm tarayıcılarda çalışmadığından, JavaScript'i kullanın! Aynı sonucu vermeli.

Aşağıdaki işlev JQuery'yi gerektirir ve her seferinde pencere boyutunu yeniden boyutlandırır.

Bu işlev, öğenin üst öğesinin üst öğesinin daha geniş olup olmadığını denetler ve eğer varsa, yalnızca sözcük yerine tüm kesilir. Çocukların ebeveynlerinden daha büyük büyümelerini istemiyoruz, değil mi?

Sadece tablolar için ihtiyacım vardı, bu yüzden başka bir öğede isterseniz, "tablo" u "#yourId" veya ".yourClass" olarak değiştirin. Bir ebeveyn-div olduğundan emin olun ya da "div" u "body" ya da bir şey olarak değiştirin?

çok kod var bu yüzden, başka gidecek, bu kelime-mola dönüşür ve geri değişmelidir edip etmediğini kontrol ..: '/

$(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'); 

Ben bunun için çalışır umut sen! word-wrap: break-all çalışmıyor

Answer 4

ise de deneyin bu ekleyin: Bootstrap 3 Bu tek satırda metin sarmak için yararlıdır

Answer 5

yılında .btn sınıfla benim için

white-space:normal; 

işi:

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