1

楕円形にする必要のあるビジュアルコンポーネントを備えたWebアプリに取り組んでいます。キャッチは、同じ行に他の要素が必要なことです。

[ ellipsized text | element-x | element-y ]

フロートを使ってすべてを1行にまとめようとしましたが、これにより要素が楕円化されなくなります。

私が思いついた唯一の解決策は、element-yを作成することでしたが、それから、楕円形のテキストに対して{ position: fixed; top:0; right:0 }aを実行する必要があります。これは問題ありません。margin-right: xxx

問題は、element-xが翻訳ファイルからの外部化された文字列であるため、ここで幅を取得するための明確な方法がないことです。

誰かがこれを達成するためのクリーンな方法を知っていますか？理想的には、画像であるelement-y以外に幅を設定することは避けたいと思います。

4

2 に答える 2

2

2番目のdivを右に設定floatし、次のCSSルールを使用して最初のdivを楕円形にする必要があります。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

次に、最初の要素に次のルールを追加します。

display: inline-block;
width: calc(100% - 50px);

calc（必要に応じてルールを調整できます）。

これが動作中のJSFiddleです。

于 2017-06-26T10:16:25.250 に答える
0

私は、さまざまなブラウザでうまく機能するように見える解決策を考え出しました。

楕円形のブロック要素をインライン要素でラップする必要があります。楕円化が機能する方法では、楕円化された要素が何かによって制約される必要があります。通常、それは静的な幅です。ただし、最大幅、または親からの任意の制約も機能します。

<div class="container">
   <span style="display:inline; float: right;">
       Right-aligned elements
   </span>
   <span>
      <span class="ellipsized-block-text">Long text goes here</span>
   </span>
</div>
于 2012-10-22T14:44:57.053 に答える