テキストオーバーフローの使用：省略記号。子供が入力であるときに親divにある

Question

とtext-overflowがellipsisに設定されている親div内に複数の折り返しのないインライン子要素があります。

最後の子がアンカータグの場合、省略記号は正常に機能しますが、入力の場合はテキストだけがクリップされます。前の項目は可変幅なので、最後の入力には妥当な最大幅を設定できません。

.parent { 
 
    width: 120px; 
 
    background: #eee; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<div class="parent"> 
 
    <span class="child1"> 
 
    <a href="#">link 1</a> text 
 
    <a href="#">Lorem ipsum dolor</a> 
 
    </span> 
 
</div> 
 
<div class="parent"> 
 
    <span class="child1"> 
 
    <a href="#">link 2</a> text 
 
    <input type="submit" class="request-topic-link" value="lorem-ipsum-dolor">    
 
    </span> 
 
</div>

任意の提案ですか？ここにはJSFiddleがあります。

Answer 1

これは私が思いついたものです。マークアップを調整する必要がありますが、それ以外は動作します。

A）もセマンティックあるを提出ボタンで入力を安全に交換することができ提出すると、あなたのニーズに合わせてスタイルすることができます。あなたは変数の内容を持っているので b）は、単純なテキストがspan

内にラップする必要があり、それを行うための唯一の方法は、table-cellsを使用している...明らかにtable内にラップ。 table-layout:fixedを使用すると、コンテンツの幅が可変でない場合には、このトリックを行います。このため、私は、何を使用するかの指標にすぎないすべての表セルに幅33％を追加しました。テーブルセルは設定値を無視し、内容に応じてそれに応じて任意に展開します。ここで

が更新マークアップと作業フィドルです： HTML：

<div class="parent"> 
    <span class="child1"> 
    <a href="#">link 1</a> text <a href="#">Lorem ipsum dolor</a>    </span> 
</div> 
<div class="parent"> 
    <span class="child1"> 
    <a href="#">link 1</a><span> textdfgg </span> 
    <button type="submit" class="request-topic-link">lorem-ipsum-dolor</button> 
    </span> 
</div> 

CSS：

.parent { 
    width: 120px; 
    background: #fff; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

.child1 { 
    display: table; 
    width: 100%; 
} 

.child1 > * { 
    display: table-cell; 
    width: 33%; 
} 

button { 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
    display: inline-block; 
    width: 100%; 
} 

の作業フィドル：http://jsfiddle.net/5muarho3/3/