1

子に幅が設定されていない別のスパン内にスパンがあるため、テキストは1〜2語後に新しい行に移動します。

これが私が何を意味するのかをよりよく理解するのに役立つコードとjsfiddleです。

<span class="container">Lorem ipsum dolor
    <span class="child">Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut risus enim, tincidunt ac tristique quis, vulputate sed nulla. Nam imperdiet imperdiet mollis. Vestibulum sed elit lorem, et luctus massa. Vivamus eleifend ante vel odio lacinia.
    </span>
</span>

css：

.container {
    width:auto;
    background-color:red;
    position:relative;
}

.child {
    position:absolute;
    top:35px;
    left:10px;
    max-width:500px;
    background-color:yellow;
    /*white-space:nowrap; This does not work because the text does not wrap after 500px */ 
}

http://jsfiddle.net/RRx6r/

私が理想的に達成したいのは、その中のテキストの量に応じて、子スパンを最大500pxに拡張することです。

行が途切れることがないため、white-space：nowrapは機能しません。

何か案は？

4

3 に答える 3

1

追加

display:block;

、またはとの.container両方に.container（.child他のcssルールの問題に応じて）。コンテナにも最大幅を設定する必要があることに注意してください。そうしないと、使用可能なスペースに合わせて拡張されます。

このフィドルを見る

于 2012-10-10T12:46:17.270 に答える
1

要素を絶対に配置する場合（position:absolute;）、特定の幅を設定する必要があります。そうしないと、要素（および確かにのようなインライン要素SPAN）が必要な最小幅に縮小されます。

1つのオプションは、親要素をに設定することdisplay: block;です。これにより、使用可能な最大幅に拡張されます。そうすれば、内側の要素は500pxの幅に拡張する機会があります。

http://jsfiddle.net/RRx6r/2/

于 2012-10-10T12:47:04.887 に答える
0

つまり、親スパンをDIVに変更します

親スパンが子スパンが表示される最大幅を設定しているため、これが発生しました。

子スパンを長くしたい場合は、次のことができます。

スパンをdivに変更します。これはスパンと同じですが、デフォルトでは親コンテナの全幅を使用します。これはdisplay:block、CSSに入れるのと同じです。DIVとSPANは、実際にはそのプロパティを持つ空の要素です。 、display：block、またはdisplay：inline。

于 2012-10-10T13:18:36.027 に答える