Önceden belirlenmiş genişlikleri ile divs içinde hiçbir kırılma boşluklar olan uzun metin bölümlerini sarma çapraz tarayıcı (örneğin; uzun URL) arıyorum.

Burada web etrafında ve neden bulduğum bazı çözümleryokbenim için çalışır:

• taşma : gizli / oto / kaydırma- Kaydırma yapmadan görünür tüm metin istiyorum. Div dikey olarak değil, yatay olarak büyüyebilir.
• Enjekte ­ dize içinejs) / tarafı sunucu ­ FF3 artık desteklenmiyor, ama ortada bir ­ ile bir URL yapıştırarak Safari çalışmaz. Ayrıca, bildiğim kadarıyla, en iyi dize uzaklıklar için bu karakterleri eklemek için öğrenmek için metin genişliği (bir hacky yolu, bir sonraki maddeye bakın) ölçüm temiz bir yöntemi yok. Başka bir sorun, Firefox ve Opera yakınlaştırma kolayca kırabilir.
• gizli bir unsur haline metin damping ve offsetWidth ölçüm- madde ile ilgili, dize içine ekstra karakterler eklemek gerekir. Ayrıca, tatili uzun bir metin vücut gerekli miktarını ölçmek kolay etkili bir site donabilir pahalı DOM eklemeler (her dize uzunluğu için), binlerce gerektirebilir.
• bir tek aralıklı yazı tipi kullanılarak- yine, yakınlaştırma genişliği hesapları altüst edebilir, ve metin ücretsiz bir tarz olamaz.

Gayet iyi görünüyor ama o kadar değil şeyler:

• word-wrap : break-word- şimdi part of CSS3 working draft ama ya Firefox, Opera tarafından desteklenen değil ya da henüz Safari. Bu eğer tüm tarayıcılarda bugün işe yaradı eğer ideal çözüm olurdu :(
• enjekte <wbr> dize etiketlerijs)/ sunucu tarafı - kopyalama ve yapıştırma URL tüm tarayıcılarda çalışır, ama yine de sonları nereye koyacağını ölçmek için iyi bir yol yoktur. Ayrıca, bu etiket HTML geçersiz kılar.
• her karakterden sonra Ekleme keser- DOM eklemeler binlerce daha iyi, ama yine de ideal değil (bir belge için DOM öğeleri ekleyerek bellek yiyor ve çıkışlar sorgular seçici yavaşlatır, diğer şeyler arasında).

Herkes bu sorunu çözmek için nasıl daha fazla fikir var mı?

Css yo!

.wordwrap {
    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  */ 
}

Ayrıca ben sadece bu makaleyi buldum http://www.impressivewebs.com/word-wrap-css3/

Kullanmalısınız

.wordwrap {  
    word-wrap: break-word;
}  

.no_wordwrap {  
    word-wrap: normal;
}