0
これはからのフォローアップである：私はブートストラップ3とグリッド・カラムシステムを使用してフードメニューを作成していて、私が作成したUsing dot leaders for a food menu with bootstrap gridsフレックスとフードメニューのドットリーダーを使用して*フォローアップ
メニュー項目と価格の間にドットリーダーを追加します。私はトリックをやっている
display:flex;
を使用しているユーザーLGSonのおかげで、しかし今単語の余裕がありますどのように多くの単語に応じて異なる点リーダを切断しているようです。 1つの単語は切り捨てられず、その後は約10ピクセル（これらは近似され、正確ではありません）と思われます。私の目標はドットリーダーを完全に統一されたものにすることです。ここに画像があります： 
ここに私のコードです。それが長すぎるなら私は謝ります、私はそれを簡潔に保つようにしました。もし誰かが助けてくれたら、私はそれを感謝します。一つの方法は、代わりにドットを描画するために擬似要素を使用し、それをページの背景と一致するbackground色を与える要素にテキストをラップし、バックグラウンドでその要素の下にドットを配置することであろう
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class=" col-xs-6 ">
<p class="item dots">Cheese</p>
<p class="item dots">White</p>
<p class="item dots">Special</p>
<p class="item dots">Whole Wheat</p>
<p class="item dots">Silician</p>
<p class="item dots">Silician Special</p>
<p class="item dots">Chicago Style</p>
</div>
<div class="col-xs-2">
<p class="item">$8.99</p>
<p class="item">$9.99</p>
<p class="item">$13.50</p>
<p class="item">$13.50</p>
<p class="item">$13.50</p>
<p class="item">$13.50</p>
<p class="item">$13.50</p>
</div>
<div class="col-xs-2">
<p class="item">$11.99</p>
<p class="item">$12.99</p>
<p class="item">$15.99</p>
<p class="item">$12.99</p>
<p class="item">$12.99</p>
<p class="item">$12.99</p>
<p class="item">$12.99</p>
</div>
<div class="col-xs-2">
<p class="item">$12.99</p>
<p class="item">$13.99</p>
<p class="item">$17.99</p>
<p class="item">$13.99</p>
<p class="item">$15.99</p>
<p class="item">$20.00</p>
<p class="item">$14.99</p>
</div>
</div>
</div>
<style>
.dots {
display: flex;
}
.dots::after {
white-space: nowrap;
overflow: hidden;
direction: rtl;
content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."
}
</style>
<!-- Matches Height in between divs--><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js">
$(function() {
$('.item').matchHeight(false);
//Make links '.active' in Handlebars
var url = window.location.href;
$('nav li').find('.active').removeClass('active');
$('nav li a').filter(function(){
return this.href == url;
}).parent().addClass('active');
});
</script>
[OK]を、感謝を
white-space: nowrapを追加します。 – Coffeeteer