0

3 つの問題があります。

  1. text-overflow: ellipsisが効果を発揮するように、左側の要素の幅を定義する必要があります。
  2. 右側にフロートされたコントロールは常にライン上に表示され、左側の要素によって押し下げられることはありません
  3. この HTML グループのコンテナーはサイズ変更可能であるため、記事のタイトルのサイズを固定することはできません。ただし、コントロールは常に ~160px です。

この HTML グループのコンテナはサイズ変更可能です。このフィドルの結果ペインをドラッグすることは、現在のアプリでの動作とまったく同じです。

CSS

.article-title {
    float: left;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 85%;
}
.pull-right {
    float: right;
}
.browse-issue {
    margin-right: 1ex;
}

HTML

<span class="article-title" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a.">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a.</span>
<div class="pull-right">
    <button type="button" class="browse-issue btn" style="">Browse Issue</button>
    <button type="button" class="print btn"><i class="icon-print"></i></button>
</div>
4

1 に答える 1

2

スニペットを次のようにラップする暫定的な解決策がありますdiv。

<div class="wrapper">
    <span class="article-title" title="Lorem ipsum dolor sit amet...">Lorem ipsum dolor sit amet...</span>
    <div class="pull-right">
        <button type="button" class="browse-issue btn" style="">Browse Issue</button>
        <button type="button" class="print btn"><i class="icon-print"></i></button>
    </div>
</div>

次のようにスタイルを設定できます。

.wrapper {
    outline: 1px dotted red;
    position: relative;
    padding-right: 0px;
}
.article-title {
    display: block;
    margin-right: 170px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: 1px solid blue;
}
.pull-right {
    position: absolute;
    top: 0;
    right: 0;
    outline: 1px dotted blue;
}
.browse-issue {
    margin-right: 1ex;
}

スタイリングは無視してかまいoutlineません。要素ボックスが見やすくなるように入れています。

wrapper秘訣は、ブロック要素を定義し、absolute配置を使用してpull-rightdiv をラッパーの右側と上部に配置することです。

次に要素を指定しdisplay: block、テストがボタンの下に流れるのを防ぐのに十分な値を許可します。article-titleright-margin

はtext-overflow: ellipsis機能していましたが、テキストが十分に長くなかったため、効果が見られませんでした。

も調整しましたline-heightが、それはオプションです。

これは、必要なものにかなり近いはずです。

フィドルのリファレンス: http://jsfiddle.net/audetwebdesign/PmUje/

于 2013-04-03T16:37:07.717 に答える