0

長い単語が含まれていると、コンテンツに div が収まらないという問題があります。max-width を取るだけです。

スクリーンショット:

http://img687.imageshack.us/img687/3253/photondf.png

javaScript を使用せずに div をコンテンツと同じ幅にしたい。

HTML

<div class="div">
    <p>fkjdajfkdjfkdjfkdfjkdfjkdfjdfdjkfkjfdkdfioiewtiovvuiocuvicxvocxvuiocxvucioxbuvbhxjk
    civuiozxviopucvicvuvjcizoxvopcxvpiovxzijpvxzicovpzvjijopcvzxpvjiocvpjzvicvzpjvci.</p>
<div>

CSS

.div {
    float: left;
    background:red;
    max-width: 900px;
}
4

3 に答える 3

0

divに何をさせようとしているのですか？コンテンツのサイズまで縮小して 900px 以下にしたいですか?

于 2012-11-06T23:03:54.850 に答える
0

div を 900px より大きくしたくない場合は、width: auto;試してみてください。max-width

于 2012-11-06T23:05:03.587 に答える
0

さて、ここにはいくつかの問題があります。

  1. のコンテンツにpはスペースがまったくありません。つまり、単語を複数の行に「分割」することはできません。そして、あなたの div は実際には正しい幅を持っています。

  2. 複数の行に分割したくない場合を除きます。overflowdiv で または のいずれかにauto定義できますhidden。この場合、autoはスクロールバーを追加hiddenし、オーバーするコンテンツを単純に非表示にします。

  3. または のoverflowいずれかの場合、実際には css3 で単語の折り返しを強制できます: http://www.w3schools.com/cssref/css3_pr_word-wrap.asppdiv

  4. div の幅を定義したため、実際には常にその幅が使用され、それ以上は使用されませんでした。(オーバーフローしたテキストを div よりも大きくカウントしないでください)。レイアウト サイズとこの div の周りの他の div の位置を計算するときに、オーバーフローしたテキストを考慮に入れるべきではありません。

ところで、実際にスペースがあるときに問題が発生した場合、そのような非常に長い文字列は実際には良い「ユースケース」ではありません。その代わりにここに貼り付けるべきです。

編集

あなたの div は長い単語でコンテンツを「合わせる」ことができません。可能な最大幅に広がり、最大幅に達すると、別の行に折り返されます。単語が div よりも大きい場合、オーバーフローします。

編集 2

本当にやりたいなら方法はあります。しかし、これはかなり醜いです。<br />各長い単語の後に追加する必要があります。<br />テンプレート エンジン内でテキストを渡す場合は、スペースを css に置き換えることもできます。しかし、正直に言うと、そうしないでください。

于 2012-11-06T23:05:19.743 に答える