1

次のフィドルのようなレイアウトがある状況があります。

<div>
    <span style="float:left;">This is a longer text that could potentially split into more than one line.</span>
    <span style="float:right;">Force this text into one line.</span>
</div>

jsfiddle デモ.

私が達成しようとしているのは、適切なスパンがサイズを調整して、可能な限り小さくし、そのコンテンツを 1 行に収めることです。左側のスパンは、メインの div サイズの残りの部分に合わせて調整する必要があり、テキストを必要な数の行に分割できます。

制限：

  • コンテンツは両方のスパンで可変です。左のものは潜在的に無制限で、右のものは画面の約 30% を超えることはありません。
  • 純粋なcss/htmlソリューションが本当に欲しいです。Javascript を使用する方法はわかっていますが、管理が難しくなるため、よりクリーンなものを検討しています。
  • 左スパンの最初の行は、常に右スパンの最初の行と同じ行にある必要があります。

これどうやってするの？

4

4 に答える 4

3

方法 1

明示的に指定したくない場合は、スパンにwidth使用できます。display: table;left

.left {
    display: table;
    background-color: orange; /*Just for demo */
}

.right {
    float: right;
    white-space: nowrap;
    background-color: gold; /*Just for demo */
}

JSFiddle デモ。

方法 2

また、次のようにして、左側spanをブロック レベル要素として表示し、水平オーバーフローを非表示にすることもできoverflow-x: hidden;ます。

.left {
    display: block;
    overflow-x: hidden;
}

デモを更新しました。

于 2013-08-13T11:03:50.197 に答える
0

widthプロパティを両方のスパンに適用

<span style="float:left; width:50%;">This is a longer text that could potentially split into more than one line.</span>
<span style="float:right; width:50%;">Force this text into one line.</span>

またはここhttp://jsfiddle.net/pE2c8/4/を参照してください。理解できます。

于 2013-08-13T10:40:54.417 に答える
0

最初のコンテナーがどこで改行する必要があるかを示す何らかの方法が必要なため、2 つのスパンに少なくともある種の幅プロパティを指定せずにこれを達成することはできないと思います。この場合、2 番目のコンテナーが約 30% 以上を使用しないことがわかっていると便利です。

フィドル

を使用してmax-width：

.left {
    float: left;
    max-width: 70%;
}
.right {
    float: right;
    max-width: 30%;
    /* Can add the following for good measure
       (will keep on one line even if over 30% wide
       and hides the excess) */
    white-space: nowrap;
    overflow: hidden;
}
于 2013-08-13T10:50:11.237 に答える
0

これを行う簡単な方法は、HTML で 2 つのスパンを切り替えることです。分割する必要があるスパンに幅 100% を追加し、全幅スパンまでフロートします。

HTML

<html>
    <div>
         <span style="float:right;">Force this text into one line.asdsadsadasdsasadsad asd</span>
        <span style="width:100%;">This is a longer text that could potentially split into more than one line. </span>

    </div>
</html>

フィドル

http://jsfiddle.net/pE2c8/6/

于 2013-08-13T10:45:05.513 に答える