DİV-düzeni MASA düzeni geçiş beri, yaygın bir sorun olmaya devam ediyor:

SORUN: dinamik metin ile DİV doldurup div sütun kenarı boyunca uzanır ve sitenizi profesyonelce gösteren süper-uzun bir kelime var kaçınılmaz olarak.

RETRO-SIZLANANBuaslamasa düzenleri ile oldu. Bir tablo hücresi her zaman güzel En Uzun kelime genişliğine genişleyecektir.

ÖNEM derecesiEn büyük siteler bile, özellikle ortak kelimeler gibi Alman sitelerinde bu sorunu görüyorum "" çok uzun ("") Geschwindigkeitsbegrenzung. hız sınırı olarak

Bu herkes için uygulanabilir bir çözüm var mı?

Yumuşak tire

Yumuşak tire (­) ekleyerek uzun kelimeleri bölmek için nerede tarayıcılar söyleyebilirim:

averyvery­longword

işlenip gibi

averyverylongword

ya

averyvery-
longword

Güzel düzenli bir ifade gerekli olmadıkça onları ekleme olmayacak emin olabilirsiniz:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

Tarayıcılar ve arama motorları metin arama yaparken bu karakteri görmezden kadar akıllı ve Chrome ve Firefox (Diğerleri test etmedim) panoya metin kopyalama zaman bunu görmezden.

<wbr> element

Başka bir seçenek <wbr>, eski bir enjekte etmektir in HTML5 IE-ism,:

averyvery<wbr>longword

Hiçbir tire ile araları:

averyvery
longword

Sıfır genişlikli boşluk karakteri ile aynı elde edebilirsiniz ​ (​).

BİLGİNİZE ayrıca CSS hyphens: auto en son IE, Firefox ve Safari (but currently not Chrome) tarafından desteklenen vardır:

div.breaking {
  hyphens: auto;
}

Ancak bu heceleme heceleme sözlüğü temel alır ve uzun sözcükleri ayırmak için garanti değil. Yaslanmış metin olsa daha güzel yapabilirsiniz.

Retro-sızlanan çözüm

Düzen için <table> kötü, ama diğer unsurları display:table güzel. Eski okul masaları gibi ilginç (ve esnek) olmuş olacak

div.breaking {
   display: table-cell;
}

overflow white-space: pre-wrap aşağıda çok iyi cevaplar.