Ben kombinasyonunu kullanabilirsiniz

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

Bu başa. overflow ayar kullanılabilir alanı sonunda kesilecek neden olurken word-wrap ayarı, kelime bu özelliği destekleyen tarayıcılarda onun uzunluğuna rağmen sarılmış sağlayacak Tanımadığınız tarayıcılarda word-wrap. Eğer javascript gitmeden almak olasıdır gibi bu yıkımı yaklaşık olarak zarif.

Göre http://www.w3.org/TR/css3-text/#word-break0

word-break: break-all;

... Bu hattın ucunda bile küçük kelime kırılmış olabilir (çünkü şimdi overflow-wrap olarak değiştirildi) word-wrap gibi aynı yapmaz. Ama çalışıyor.

Bazı nadir durumlarda hyphen: auto; daha iyi sonuçlar getirebilir, ancak uzun kelime bir sözlüğe dahil yalnızca tarayıcı kullanıyor olabilir.

simple css. Try this: Put your text in < pre>...< /pre>

css kuralı

pre {
   overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
   white-space: pre-wrap; /* css-3 */
   white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
   white-space: -pre-wrap; /* Opera 4-6 */
   white-space: -o-pre-wrap; /* Opera 7 */
   /* width: 99%; */
   word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Eğer sadece belirli tarayıcılar (IE7/Win, Safari, Firefox 3.5) destekleyen mutluyuz sürece ne yazık ki, senin sorunun hiçbir saf CSS çözüm var.

word-wrap: break-word; ama sadece IE'de çalışır.

Eğer metni değiştirmek mümkün iseniz, sunucu tarafı (PHP, ASP) veya muhtemelen istemci tarafı (JavaScript), ya içine (­) 'utangaç tire' ekler küçük bir işlev yazabilirsiniz metin. Bu şekilde, metin tire her örneği de kırılmış olabilir, ve kelime kırık değilse utangaç tire gösterilmeyecektir.

Düzen, bir örnek:

bla­bla­bla­bla­bla­bla­bla­bla­bla­ (etc)

aşağıdaki gibi tarayıcınızda görüntüler:

blablabla-
blablabla-
blabla

JavaScript başvurmak ve bu gibi bir işlevi kullanmak zorunda:

<script language="javascript">
function wrap() {
    var data = document.getElementsByTagName('yourtaghere'); 
    var  desiredLength = 40 ;
    var delimiter = "<br />";
    for( var i=0; i < data.length; ++i ) {
    	cellLength=data[i].innerHTML.length
    	if( desiredLength < cellLength ) {
    		var counter=0;
    		var output="";
    		while( counter < cellLength ) {
    			output += data[i].innerHTML.substr(counter,desiredLength) + delimiter;
    			counter+= desiredLength;
    		}
    		data[i].innerHTML=output;
    	}
    }
}
window.onload=wrap;
</script>

Ya hyphenator kullanabilirsiniz

Sorunuzu değişti beri yeni bir cevap:

Bu çok basit bir PHP çözümdür:

<?php
$string = "AnExtremelyLongStringWithoutWhitespacesOrBreakpointsOfAnyKindThatWillCompletelyAndUtterlyRuinYourWebsiteDesign";
for($i=0; $i<strlen($string); $i++) {
  $newString .= $string[$i] . '&shy;';
}
echo $newString;

Aynı herhangi bir dil tabii elde edilebilir.

Genişliği sabit (ve hatta daha az <table>), Stack Borsası tarayıcılar satır sonları için olası konumlarını bulmak için kullanabileceğiniz bazı görünmez Unicode işaretçileri, ekler değilken word-wrap: break-word iyi çalışmıyor gibi . Ama: bu görünmez belirteçleri var hala zaman ziyaretçi kopyalar kötü olabilir metin. Meta hakkında daha fazla bilgi, http://meta.stackexchange.com/questions/170970/occasionally-the-unicode-character-sequence-u200c-u200b-zwnj-zwsp-is-insert/.

Bunun yerine Unicode büyü, ekleme <span style="display: inline-block"></span> her birkaç karakter çıkan metin kopyalarken not kötü bir etkisi var gibi görünüyor. IOS 6.1.2 üzerinde Android 4.1 ve Safari, stok tarayıcı ve Chrome, (IE8 ve IE7 çok çalışıyor simüle bir Mac üzerinde Parallels Windows 7) Bu Chrome 25, Firefox 19, Safari 6, Internet Explorer 9'da benim için çalışıyor , ve bir probably also supported in Opera. Bkz this JS Bin example.

IE7 destekledi olsa, IE8 ve IE9 yok: Bir gün, <wbr> çözüm olacaktır, ancak not today.

Önerilen etiketleri gerçekten uzun kelime (veya URL'leri) kırmak için çalışır ancak dar divs metni akıtmaya çalışıyor tarayıcıdan tarayıcıya karışık sonuçlar alırsınız. Örneğin 200px div:

<div style="font-size:12px;font-family:monospace;width:200px;word-break:break-all;word-wrap:break-word;">1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890</div>

Bir sayı, iki sütun olsun - Chrome'da sayılar Firefox'ta onlar değil, kırmak! Her fırsatta kırmak değil - Bu Firefox ne kadar alan bir "uzun" kelimesinin önceki satıra geçerli dikkate almaz görünüyor. Bu davranış hiç düzeltti, ben Firefox da bu metin haklı nasıl etkilediğini dikkate umuyoruz.

"Utangaç" etiketleri Firefox yardım ama yine de "düzensiz" metin olsun. Ben kapsamlı testler yapmadım ama utangaç etiketleri Firefox öngörülemeyen sonuçları (divs kendi stilini kaybetmek) kısa sözlerini de kullandı (az 8 karakter) oluşturmak görünür. Ben şahsen Chrome'un daha agresif sonlarını tercih!