Ben şahsen kullandım, ama Hyphenator umut verici görünüyor değil.

Ayrıca sorular (muhtemelen yinelenen) ilgili bkz:

• word wrap in css / js
• Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)

CSS3:

word-wrap:break-word

Ben aynı sorunu çözmek için çalışıyordu ve ben burada de çözüm bulundu:

http://perishablepress.com/press/2010/06/01/wrapping-content/

Çözüm: kabına ekleyerek aşağıdaki CSS özellikleri

div {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

Fikir çok daha iyi çapraz tarayıcı uyumluluğu olsun hepsini kullanıyor

Umarım bu yardımcı olur

Ben overflow: auto CSS özellik / değer eşleştirmeyi kullanmak ister. Bu ebeveyn görünmesini beklediğiniz şekilde itiraz verecek. Üst içinde metin çok geniş ise, çubukları nesnenin kendisi içinde görünür. Bu yapıyı bunu bakmak ve daha fazla görmek için üzerine gitmek için yeteneği ile izleyici sağlamak istediğiniz şekilde devam edecektir.

Edit: overflow: auto overflow: scroll taşan içerik bulunduğunda auto ile, kaydırma çubukları, yalnızca görünür olmasıdır göre yaklaşık güzel bir şey. scroll ile, kaydırma çubukları, her zaman görebilir.

Ben sabit bir genişlik ayarı taşması ilerlemek için (veya tamamen içeriğine bağlı olarak gizlemek) olurdu bir div yazı koymak istiyorum.

şöyle:

#post{
    width: 500px;
    overflow: scroll;
}

Ama bu sadece benim.

EDIT: cLFlaVA kullanmak daha iyidir ... belirttiği gibi auto ardından scroll. Ona katılıyorum.

Ben hiç kimse <wbr> (opsiyonel line-break) etiketi, bu sorunun benim favori çözümlerden birini sözü var şaşırdım. Bu oldukça bulunuyor well-supported in browsers ve aslında gerekli eğer can satır sonu ekler bu tarayıcı söyler. Aynı anlamı ile ilgili sıfır genişlikli boşluk karakteri, ​ da bulunuyor.

Bir web sayfasında kullanıcı yorumları görüntüleme, belirtilen kullanım durumda, ben eklemek basit Yani vb enjeksiyon saldırıları önlemek için bazı çıkış biçimlendirme, zaten orada olduğunu zannedebilir bu <wbr>, her {[(1 etiketleri )]} çok uzun, ya da bağlantıları olan bir deyişle karakterler.

CSS her zaman yapmak izin vermez çıktı, biçimi üzerinde kontrole ihtiyaç olduğunda bu özellikle yararlıdır.

P: Ben böyle sabit benim sağ kenar çubuğu kalmadan sorunu atlatmak

Hiç "mükemmel" HTML / CSS çözüm yoktur.

Çözümler taşması gizlemek (yani kayan ya da sadece gizli) veya uygun genişletin ya. Hiçbir büyü vardır.

S: Nasıl sadece 99cm genişliğinde bir alana bir 100cm genişliğinde bir nesne sığabilir?

A: Bunu yapamazsınız.

Okumanız break-wveyad olabilir

EDIT

Please check out this solution http://stackoverflow.com/questions/330229/how-to-apply-a-line-wrapcontinuation-style-and-code-fveyamatting-with-css

veya

http://stackoverflow.com/questions/320184/who-has-solved-the-long-wveyad-breaks-my-div-problem-hint-not-stackoverflow

İşte ASP.NET içinde ne var:

1. Tüm kelimeleri almak için boşluklar üzerinde metin alanını bölmek
2. Kelimeler belirli bir miktar daha uzun kelimeler arıyor yineleme
3. Her x karakterleri eklemek (örneğin her 25 karakter.)

Bunu yapmanın diğer CSS tabanlı yollarını baktı, ancak çapraz tarayıcı çalıştı şey bulamadık.

Jon'un öneri oluşturduğum kod dayanmaktadır:

public static string WrapWords(string text, int maxLength)
    {
        string[] words = text.Split(' ');
        for (int i = 0; i < words.Length; i++)
        {
            if (words[i].Length > maxLength) //long word
            {
                words[i] = words[i].Insert(maxLength, " ");
                //still long ?
                words[i]=WrapWords(words[i], maxLength);
            }
        }
        text = string.Join(" ", words);
        return (text);
    }

Ben JavaScript kullanan bir çözüm ve web sitenizin düzenini bozmadan sarılmış, böylece uzun bir sözcük kırmak için basit bir Düzenli İfade attılar.

Wrap long lines using CSS and JavaScript

I didn't want to add libraries to my pages just for word breaking. Then I wrote a simple function which I provide below, hope it helps people.

(; Arasında, ancak kodu kolayca değiştirebilirsiniz Bu 15 karakter ile kırma ve uygulanması "ve utangaç" olduğunu)

//the function:
BreakLargeWords = function (str)
{
    BreakLargeWord = function (word)
    {
        var brokenWords = [];
        var wpatt = /\w{15}|\w/igm;
        while (wmatch = wpatt.exec(word))
        {
            var brokenWord = wmatch[0];
            brokenWords.push(brokenWord);
            if (brokenWord.length >= 15) brokenWords.push("­");
        }
        return brokenWords.join("");
    }

    var match;
    var word = "";
    var words = [];
    var patt = /\W/igm;
    var prevPos = 0;
    while (match = patt.exec(str))
    {
        var pos = match.index;
        var len = pos - prevPos;
        word = str.substr(prevPos, len);

        if (word.length > 15) word = BreakLargeWord(word);

        words.push(word);
        words.push(match[0]);
        prevPos = pos + 1;
    }
    word = str.substr(prevPos);
    if (word.length > 15) word = BreakLargeWord(word);
    words.push(word);
    var text = words.join("");
    return text;
}

//how to use
var bigText = "Why is this text this big? Lets do a wrap <b>here</b>! aaaaaaaaaaaaa-bbbbb-eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
var goodText = BreakLargeWords(bigText);

I know that this is a really old problem and since I had the same problem I searched for a easy solution. As mentioned in the first post I decided to use the php-function wordwrap.

Bilgi için aşağıdaki kod örneğine bakın ;-)

<?php
    $v = "reallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglink";
    $v2 = wordwrap($v, 12, "<br/>", true);
?>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <table width="300" border="1">
            <tr height="30">
                <td colspan="3" align="center" valign="top">test</td>
            </tr>
            <tr>
                <td width="100"><a href="<?php echo $v; ?>"><?php echo $v2; ?></a></td>
                <td width="100">&nbsp;</td>
                <td width="100">&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

Umarım bu yardımcı olur.