html - テキストがpタグで折り返されていません

Question

2つのフロートdivが並んでいて、中にpタグがあります。画像の下のテキストでわかるように、pタグ内のテキストは折り返されず、コンテナをオーバーフローするだけです。

私のHTMLは次のようになります。

        <div class="submenu">
            <h3>Destinations in Europe</h3>
            <ul>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
            </ul>
            <h3>Features</h3>
            <div>
                <img src="/assets/images/o/menu/city-feat-one.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
                </p>
            </div>
            <div>
                <img src="/assets/images/o/menu/city-feat-two.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
                </p>
            </div>           
        </div>

私のCSS：

#rb-menu-com li .submenu > div { 
    width:48%;
    float:left;
    position: relative;
}

#rb-menu-com li .submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative;
}

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
}

誰かがこれを以前に経験したことがありますか？私はそうではありません！！私を怒らせる！

score 119 · Accepted Answer

このスタイルを<p>タグに付けます。

p {
    word-break: break-all;
    white-space: normal;
}

score 106 · Accepted Answer

ワードラップは、単語の区切りがある場合にのみ発生します。

それと同じ長さの「言葉」があれば、それを壊す場所はありません。

適切な解決策は、意味のない文字列ではなく、実際のコンテンツを書き込むことです。ユーザー生成コンテンツを使用している場合は、非常に長い単語のチェックを追加し、それらを禁止します（または、すべてをリンクに保持しながら、URLの一部を切り取ります）。

word-breakまたは、 CSSプロパティを使用して、単語の途中で改行するようにブラウザに指示することもできます。

p { word-break: break-all }

（ブラウザのサポートに注意してください）。

overflowまたは、コンテナに収まらない場合は、を使用してテキストを切り捨てることができます。

score 21 · Accepted Answer

まだ苦労している人は、問題のフォントに行の高さの値を設定しているかどうかを確認してください。ワードラップを上書きしている可能性があります。

score 5 · Accepted Answer

これは、テキストが連続しているためです。つまり、スペースのない1つの長い単語を意味します。それを壊すには追加word-break: break-all;

.submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative; 
    word-break: break-all; 
    background:red;
}

デモ

score 4 · Accepted Answer

これは質問に対する答えではありませんが、私が抱えていた問題の答えを探しているときにこのページを見つけたので、私が見つけた解決策について言及したいと思います。これが他の人に役立つことを願って：

問題は、<p>タグ内のテキストがdivで折りたたまれないことでした。最終的に、私はインスペクターを開いて、すべての単語の間に「ノーブレークスペースエンティティ」があることに気づきました。私のエディターviは、通常の空白スペースを表示していましたが（一部の非表示のchr、何がわかりません）、PDFドキュメントからテキストをコピーして貼り付けました。解決策は、vi内から空白スペースをコピーし、それを空白スペースに置き換えることでした。すなわち。：％s / / / g置き換えられる空白は、問題のあるテキストからコピーされました。問題が解決しました。

score 3 · Accepted Answer

ワードラップを使用して、単語またはコンテナ内の行に収まらない場合は文字の連続文字列を分割できます。

word-wrap: break-word;

これにより、1つの文字列が行に収まらない場合を除いて、適切なブレークポイントで改行が維持されます。収まらない場合は、改行されます。

JSFiddle

score 3 · Accepted Answer

解決策は実際には

p{
    white-space:normal;
}

ワードブレイクプロパティを変更することで、ブレイク動作を変更できます

p{
    word-break: break-all; // will break at end of line 
}

break-all：最後の単語で文字列を壊しますword-break：かなりブレーキがかかります、たとえば？通常のポイント：ワードブレイクと同じ

score 3 · Accepted Answer

これはこの質問には少し遅れていますが、他の人が恩恵を受けるかもしれません。同様の問題が発生しましたが、すべてのデバイスサイズでテキストを正しく折り返すための追加要件がありました。だから私の場合、これはうまくいった。ビューポートを設定する必要があります。

 .p
   {
   white-space: normal;
    overflow-wrap: break-word;
    width: 96vw;
   }

score 1 · Accepted Answer

1

簡単

p{
    word-wrap: break-word;
}

于 2016-11-17T21:12:35.127 に答える

score 0 · Accepted Answer

問題のあるp要素に追加width: 100%;することで、問題は解決しました。なぜそれが機能するのかわかりません。

score 0 · Accepted Answer

目的の結果が完全な単語の使用によって行を分割することである場合：

p { word-break: break-word; }

それ以外の場合は使用できます：

p { word-break: break-all; }

score -1 · Accepted Answer

ここにいる他の人にとって、私が探していたcssは

overflow-wrap: break-word;

これは、必要な場合にのみ単語を分割します（1つの単語の長さがpの幅よりも大きい）。word-break: break-allこれは、すべての行の最後の単語を分割できる場合とは異なります。

オーバーフローラップデモ

score -3 · Accepted Answer

画像にfloat：leftプロパティを追加します。

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
    float:left;
}

html - テキストがpタグで折り返されていません

13 に答える 13

Related

Reference