20

私は次の構造を持っています：

<ul>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
</ul>

pのテキストが10pxの制限を超えた場合、新しい行に続けてほしいのですが、どうすればよいですか？ありがとう

4

5 に答える 5

26

あなたの例はすでに単語をラップしています（<p>すでにブロック要素であるため）、単語を分割したい場合は、次のことを試すことができます：

p.letters {
    word-wrap: break-word;
}

基本的な作業例は次のとおりです：http：//jsfiddle.net/G9z5M/（以下の更新を参照）。

さまざまなテクニックを使用して、それを試すことができます。

/* Wraps normally, on whitespace */
p.words {
    word-wrap: normal;
}    

/* Hides non-wrapped letters */
p.hidden {
    overflow: hidden;
}

/* Outputs a single line, doesn't wrap at all */
p.nowrap {
    white-space: nowrap;
}​

更新されたフィドルを参照してください：http：//jsfiddle.net/G9z5M/1/

于 2012-12-09T18:21:06.540 に答える
10

私にとってはうまくいきました

white-space: initial;

それは他の誰かに役立つかもしれません。

于 2018-10-11T08:02:14.980 に答える
4

通常p、要素はブロックであるため、widthが尊重され、10ピクセルでラップする必要があります。

http://jsfiddle.net/ejLmu/を参照してください

それがうまくいかない場合は、デフォルト設定を上書きするいくつかのcssルールがあることを意味します。設定display:inline（この場合、幅は尊重されません）、またはwhite-space:nowrap;（テキストの折り返しを無効にする）のいずれかを設定しました。

于 2012-12-09T18:19:32.183 に答える
1

私はあなたの質問を理解しているわけではありませんが、CSSを使用して試してみてください：

word-break: break-all; // normal; // keep-all;

そして、余分なコンテンツを非表示にしたい場合：

overflow: hidden;
于 2012-12-09T18:25:20.267 に答える
0

あなたは使用する必要があります

style="width:10px; display: block;"
于 2012-12-09T18:19:16.457 に答える