テキストの動的最大幅

だから私はこのマークアップを持っているとしましょう。テキストの動的最大幅

<div> 
    <span>Text one</span> 
    <span class="sticky">ABC</span> 
</div> 
<div> 
    <span>Some other text</span> 
    <span class="sticky">DEF</span> 
</div> 
<div> 
    <span>Lorem dolor sit amet lorem ipsum dolor</span> 
    <span class="sticky">GHI</span> 
</div>

CSSを使用すると、次のような結果が得られます。

ただし、最初のspanのテキストがdivの割り当てられた幅よりも長い場合に問題が発生します。普通のテキストの折り返しだけです。 2番目の行の末尾に2番目のspanがバンプされます。

ただし、この要素を単一行にする必要があります。今、もちろんこれを達成するために、あなたはそうします。

white-space: nowrap; 
overflow: hidden;

しかし、それは最初spanのテキストの長さによって追い払わだとして、次に何が起こるかは二spanは、忘却の彼方に消えています。

私が達成したいのは、下の3番目の例で描いたものです。最初のspanの内容が長すぎて表示できない場合、text-overflow: ellipsis;はドットドットで文字列を切り取り、2番目のspanは右端（divのpadding）にプッシュされます。

本質的に、第一spanの擬似max-widthは、それはそれの内容が変化することができるように（であるので、幅できるどんな、そのpaddingとspan.stickyの幅を差し引い除く、divの幅に等しくなります設定されていません）。

max-widthが実際にこのようなことに近づくときに行く方法であるかどうかはわかりませんが、私が望む動作を最もよく説明するために使用することができます。

これを達成するJS以外の方法はありますか？

Example

出典

2013-01-07 Emphram Stavanger

これは間違いなくすることができ、およびCSSで行う必要があります。最初のスパンに固定幅と固定高さを適用します。高さは、それが複数の行に伸びないようにします。 .stickyスパンはその後に配置することができます。これは、パーセンテージまたはemを使用して流体化することさえできます。何かを考えると、私は 'ABC'、 'DEF'の文脈を知らないのですが、純粋に視覚的で構造的な要素ではない場合は、：beforeまたは：after擬似クラスを使用して適用する方がよいでしょう。

ここでは簡単な例です：

div { 
    width: 200px; /* some amount that you set */ 
} 
span:not(.sticky) { /* can use another selector, just wanted it to be exceptionally clear what i was referring to here */ 
    display: inline-block; /* so height and width actually take affect */ 
    max-width: 80%; 
    height: 1em; /* so overflow hidden works and keeps text on one row */ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; /* important to show ellipsis, or words will just be broken off */ 
} 
span.sticky { 
    display: inline-block; 
    width: 20%; 
}

あなたはライブのサイトでこの作業を見たい場合は、私はmoolta.comにこの設計をしました。「挑戦する」をクリックし、モーダルを開いて友人を選ぶ。私が話しているのは、李のドロップダウンリストの内側です。彼らは、私はそれが完全に動的にするために推測

出典

2013-01-08 22:24:52 DMTintner

ラインを壊すことなく、それは最初の実際の 'MAX-width'を算出した小さなJSのdohickeyを改善することができ、省略記号になり、ボタンがそれに従わなければなりませんでした'div'の幅と' sticky'の実際のコンテンツの幅に基づいて 'span'を設定します。しかし、それは素晴らしいスタートです。 –

これを作成するために前後します。 http://jsfiddle.net/GEzXU/ - このアプローチがいかにスマートであるかについての意見を歓迎します。 –

外側のdivに動的な幅を使用してこの作業を行う方法はありますか？ – crobicha

<html> 
    <head> 
    <style> 
     .left { 
     max-width: 200px; 
     display: inline-block; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     } 

     .right { 
     float: right; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="left"> 
     <div class="right">FOO</div> 
     Lorem 
    </div> 
    <br /> 
    <div class="left"> 
     <div class="right">FOO</div> 
     Lorem ipsum 
    </div> 
    <br /> 
    <div class="left"> 
     <div class="right">FOO</div> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit 
    </div> 
    </body> 
</html>

出典

2014-03-04 00:38:24

答えて

関連する問題