3

2 つの要素を持つこのコンテナー div があります。

<div id="container">
    <div id="right">Some, list, of, words, that, I, use</div>
    <div id="left">Person Name</div>
</div>​

そして、#right div が#left divによって残されたスペースを使い果たし、オーバーフローを非表示にしたいと考えています。

また、 #left div の幅は可変であることに注意してください。

これまでのところ、このcssを思いつきました：

#container {
    width: 250px;
    border: 1px solid black;
    padding: 10px;
}

#left {
    white-space: nowrap;
    border: 1px dotted #ccc;
    display: inline;
}

#right {
    text-overflow: ellipsis;
    overflow: hidden;
    border: 1px dotted #ddd;
    white-space: nowrap;
    display: inline;
    float: right;
}

しかし、#right div にはまだすべてのテキストが表示され、以下に示すように、次の行になります。

サンプル結果

#right div をフロートにしないで遊んで追加しましたが、何も機能してwidth: 100%いないようです...

両方を同じ行に表示する方法を知っている人はいますが、#right div のオーバーフローを非表示にしますか?

jsFiddle リンク: http://jsfiddle.net/y4xnx/13/

編集：どのdivが何をすべきかについての私の説明を修正しました。

4

2 に答える 2

6

#rightの前に#leftを置くと役に立ちます：

<div id="container">
    <div id="left">Person Name</div>
    <div id="right">Some, list, of, words, that, I, use</div>
</div>​

次に、cssのいくつかの変更により、必要な処理が実行されます。

#left {
    white-space: nowrap;
    border: 1px dotted #ccc;
    float: left;
    margin-right: 5px;
}

#right {
    text-overflow: ellipsis;
    overflow: hidden;
    border: 1px dotted #ddd;
    white-space: nowrap;
}

例： http： //jsfiddle.net/grc4/MvXuN/

于 2012-12-22T02:14:25.820 に答える
1

私はあなたの質問から理解したことを何でも達成しようとしました。ここでフィドルを確認してください：http：//jsfiddle.net/y4xnx/20/

HTML：

<div id="container">
     <div id="left">Person Name</div>
    <div id="right">Some, list, of, words, that, I, use</div>
</div>​

CSS：

#container {
    width: 250px;
    border: 1px solid black;
    padding: 10px;
    white-space:nowrap;
    overflow:hidden;
}

#left {
    border: 1px dotted #ccc;
    display: inline-block;
}

#right {
    display:inline-block;
    border: 1px dotted #ddd;
}
​
于 2012-12-22T02:15:33.587 に答える