一定量の画面が表示された後のオーバーフローテキスト？

Question

私はそれはそれの80％がDIVだ取り上げた後、テキストのオーバーフローを下に持ってしようとしています。私はドットが商品名と価格の間にスペースを取ることを望んでいる。しかし、項目名が長すぎると、単語が切り詰められます。私は言葉が包むか、流れ落ちたい。私はこれを行う方法を把握しているようです。ここで

は、問題の例である：第三の項目を参照してください、それはカットオフの取得方法について説明します。

https://jsfiddle.net/x4t2hc0o/2/

.item { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.descripcion { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
.descripcion:after { 
 
    text-overflow: ellipsis; 
 
    content: " ........................................................................................................................................................................................................................................................................................." 
 
} 
 
#name { 
 
    color: red; 
 
}

<div class="item"> 
 
    <h4 class='descripcion'> <span id='name'>Burger</span> </h4> 
 
    <h4 class='precio'> $9.99 </h4> 
 
</div> 
 

 

 

 
<div class="item"> 
 
    <h4 class='descripcion'> <span id='name'>Hot Dog</span> </h4> 
 
    <h4 class='precio'> $4.99 </h4> 
 
</div> 
 

 

 

 
<div class="item"> 
 
    <h4 class='descripcion'> <span id='name'>Much longer item name that ends up taking too much of the space and going outside of the div</span> </h4> 
 
    <h4 class='precio'> $4.99 </h4> 
 
</div>

Answer 1

解決策成長センターフレックスコンテナを使用し、H4タグは、デフォルトで包むようにすることです....

これは、いくつかを必要とします特定の用途のために追加の変更を加えることができますが、全体的には理論が有効です。

.item { 
 
    width:100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    
 
    
 
} 
 
.descripcion { 
 
    overflow: hidden; 
 

 
} 
 

 
span.dots { flex-grow: 1; min-width: 10%;height: 35px; margin-left: 5px; margin-right: 5px; border-bottom: 2px dotted #aaa;} 
 

 
#name{ 
 
color: red; 
 
}

<div class="item">  
 
<h4 class='descripcion'> <span id='name'>Burger</span> </h4> 
 
<span class="dots"></span> <h4 class='precio'> $9.99 </h4> 
 
</div> 
 

 
    
 

 
<div class="item">  
 
<h4 class='descripcion'> <span id='name'>Hot Dog</span> </h4> 
 
<span class="dots"></span><h4 class='precio'> $4.99 </h4> 
 
</div> 
 

 
    
 
    
 
<div class="item">  
 
<h4 class='descripcion'> <span id='name'>Much longer item name that ends up taking too much of the space and going outside of the div</span> </h4> 
 
<span class="dots"></span><h4 class='precio'> $4.99 </h4> 
 
</div>

Answer 2

1以上がありますように私はクラスに自分の名前idを変更することをお勧めします。 jQueryのバージョンは、ここでは許容できる場合フィドルです：このバージョンでhttps://jsfiddle.net/manoeuvres/ggbysn3s/ .nameクラスの幅が、それは親だし、その後.descripcionクラスは新しい.wrappedクラスと交換さに対するチェックされています。 ：

後のjQueryの追加ビットは、価格を再配置するためにありますが、ドットは、このバージョン