段落の文字数を特定の数に制限しようとしています。テキストがこれより短い場合は、空白で埋めたいと思います。それより長い場合は、省略記号で切り捨てます。段落を含むすべてのコンテナーを同じサイズにしたい。
私はレスポンシブ グリッドを使用しているため、コンテナーは段落の長さに合わせて動的にサイズ変更されます。p 要素に pre-wrap を追加しようとしましたが、div のサイズが変更されません。追加された空白をまだ無視しているようです。
p
{
white-space:pre-wrap;
}
ここに私の状況を示す JSFiddle があります: http://jsfiddle.net/RFBza/4/
white-spacedivを「長く」したり、スペースを埋めるためにパディングを追加したりすることを意図したものではありません。含まれている div で文言がどのように折り返されるかを決定することだけを目的としています。たとえば、そのテキストを div からオーバーフローさせたい場合は、次のようにします。white-space
http://www.w3schools.com/cssref/pr_text_white-space.asp
さて、それらがすべて似ているようにしようとしている場合、手っ取り早い汚い方法は、含まれている div に最小の高さを追加することです。
これに関する問題は、言葉遣いが常に変化するため、実際の高さが変化する可能性があることです（また、あなたが言ったように、応答性があるため、サイズを変更しても機能しなくなります）
この望ましい効果を得るには他にもいくつかの手法がありますが、それらはすべて、JQuery、マークアップの変更、または PHP (文字列を非常に多くの文字にしたい場合、そうでない場合は省略記号を表示する場合) などのいずれかを必要とします...
それを CSS のセレクターに追加することもできますがp、それはすべての段落に適用されるため注意してください。たぶん、さらにいくつかのセレクターを使用して特定することができます。
p
{
white-space:pre-wrap;
min-height:192px
}
また、PHP を使用して長さを決定し、それを超える場合は省略記号を表示します。この場合、50 文字です。
echo mb_strimwidth("Your paragraph goes here", 0, 50, '...');