web-dev-qa-db-ja.com

pタグで折り返されていないテキスト

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

Example:

私の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;
}

これを経験した人はいますか？私はしていません!!私を怒らせる！

htmlcsstwitter-bootstrapcss3
34
Jon Hudson

ワードラップは、ワードブレークがある場合にのみ発生します。

それと同じ長さの「単語」がある場合、それを壊す場所はありません。

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

または、 Word-break CSSプロパティ 単語の途中で改行するようブラウザに指示します。

p { Word-break: break-all }

（注 ブラウザサポート ）。

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

65
Quentin

このスタイルを<p> 鬼ごっこ。

p {
    Word-break: break-all;
    white-space: normal;
}
71
Praveen Kumar Purushothaman

まだ苦労している人には、問題のフォントに行の高さの値が設定されているかどうかを確認してください：Wordの折り返しを上書きしている可能性があります。

12
matthewsheets

これは、連続したテキストがあるため、スペースのない単一の長いWordを意味します。それを破るにはWord-break: break-all;を追加します

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

[〜＃〜] demo [〜＃〜]

4
Sowmya

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

問題は、<p>タグ内のテキストがdivで折り返されないことでした。最終的に、私は検査官を開き、すべての単語の間に「スペースを壊さない実体」があることに気付きました。私のエディターviは、通常の空白スペース（一部の目に見えないchr、私にはわからない）を表示していましたが、PDFドキュメントからテキストをコピーしました。 vi内の空白スペースを空白スペースに置き換えます。つまり、置き換えられる空白が問題のテキストからコピーされた場所：％s///g問題が解決しました。

3
user1164594

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

Word-wrap: break-Word;

単一の文字列が行に収まらない限り、適切なブレークポイントで行を分割し続けます。その場合、行は分割されます。

JSFiddle

2
Kevin Oonk

簡単

p{
    Word-wrap: break-Word;
}
0
Developer_D

ここにいる他の人のために、私が探していたCSSは

overflow-wrap: break-Word;

Word-break: break-allこれは、すべての行の最後の単語を中断できます。

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

0
Ross Grambo