web-dev-qa-db-ja.com

HTMLでスペースなしで長い行をラップする方法は？

ユーザーがスペースや空白なしで長い行を入力すると、現在の要素よりも幅が広くなり、書式設定が中断されます。何かのようなもの：

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA ................................................. .................................................. ..........................................

PHPでwordwrap()を使用してみましたが、リンクまたは他の有効なHTMLがある場合、問題が発生します。

CSSにはいくつかのオプションがあるようですが、すべてのブラウザで機能するものはありません。 IEのワードラップを参照してください。

この問題をどのように解決しますか？

phphtmlcssword-wrap
67
Chris Bartow

個人的には使用していませんが、 Hyphenator は有望に見えます。

関連する（おそらく重複する）質問も参照してください。

7
Matt Kantor

cSS3で：

Word-wrap:break-Word
120
Marcin

私は同じ問題を解決しようとしていましたが、ここで解決策を見つけました：

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

解決策：次のCSSプロパティをコンテナに追加します

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+ */
}

アイデアはそれらをすべて使用するため、クロスブラウザの互換性が向上します

お役に立てれば

42
Fernando Costas - Mercadosweb

overflow: auto CSSプロパティ/値の組み合わせを使用するのが好きです。これにより、親オブジェクトが予想どおりにレンダリングされます。親内のテキストが広すぎる場合、スクロールバーはオブジェクト自体の中に表示されます。これにより、構造を希望どおりに保持し、視聴者がスクロールして詳細を表示できるようになります。

編集：overflow: autoと比較してoverflow: scrollの良いところは、autoを使用すると、オーバーフローするコンテンツが存在する場合にのみスクロールバーが表示されることです。 scrollを使用すると、スクロールバーは常に表示されます。

17
cLFlaVA

この問題に対する私のお気に入りの解決策の1つである<wbr>（オプションの改行）タグについて誰も言及していないことに驚いています。それはかなり ブラウザで十分にサポートされています であり、本質的にブラウザにcan必要に応じて改行を挿入することを伝えます。同じ意味を持つ関連するゼロ幅のスペース文字&#8203;もあります。

Webページにユーザーコメントを表示する前述のユースケースでは、インジェクション攻撃などを防ぐための出力フォーマットが既にあると想定します。したがって、N文字ごとにこれらの<wbr>タグを追加するのは簡単です長すぎる言葉で、またはリンクで。

これは、出力の形式を制御する必要がある場合に特に便利です。CSSでは常にそうすることはできません。

6
Wylie

スクロールする（またはコンテンツに応じて完全に非表示にする）固定幅設定オーバーフローを持つdivに投稿を配置します。

以下のようなので：

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

しかし、それは私だけです。

編集：cLFlaVAが指摘するように... autoを使用してからscrollを使用することをお勧めします。私は彼に同意します。

5
Tim Knight

「完璧な」HTML/CSSソリューションはありません。

ソリューションは、オーバーフローを非表示（スクロールまたは非表示）にするか、収まるように拡張します。魔法はありません。

Q：幅100cmの物体を幅99cmの空間に収めるにはどうすればよいですか？

A：できません。

break-Word と読むことができます

[〜＃〜] edit [〜＃〜]

このソリューションを確認してください CSSを使用した行の折り返し/継続スタイルとコードの書式設定の適用方法

または

長い単語がdivを壊さないようにする方法

2
inspite

私は右のサイドバーをそのように修正しないことで問題を回避します：P

0
Jimmy

ジョンの提案に基づいて、私が作成したコード：

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);
    }
0
Ers

ゼロ幅スペース（&#8203;）文字列に追加すると、ラップされます。

Javacriptの例を次に示します。

let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis';
// add &#8203; between every character to make it wrap
longWordWithOutSpace.split('').join('&#8203;');
0
Suresh

ASP.NETで行うことは次のとおりです。

  1. テキストフィールドをスペースで分割して、すべての単語を取得します
  2. 単語を反復して、一定量よりも長い単語を探します
  3. X文字ごとに挿入します（25文字ごとなど）。

これを行う他のCSSベースの方法を調べましたが、クロスブラウザーで機能するものは見つかりませんでした。

0
Jon Galloway

Wordを壊すためだけにライブラリをページに追加したくありませんでした。それから私は以下で提供する単純な関数を書きました。それが人々の役に立つことを願っています。

（15文字で分割され、間に「＆shy;」が適用されますが、コードで簡単に変更できます）

//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("&shy;");
        }
        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);
0
Cesar