0

投稿のリストがあります。

投稿タイトル付きの投稿コンテンツの単語を印刷したい

GMAIL（古いデザイン）のように

$TopicTitle='social networks';
$SmallDescription='The ability to easily bookmark or share content on popular social media platforms';
echo '<p class="title">'.$TopicTitle.'</p>'.' - <span class="desc">'.$SmallDescription.'</span>';
//this will prints
//social networks - The ability to easily bookmark or share content on popular social media platforms

そしてそれはうまくいきます。

だが...

ユーザーが小さなモニターを持っているか、ページのサイズを小さくした場合

このページはビッグタイトルには不十分なので、新しい

このような

//social networks - The ability to easily bookmark or share content 
//on popular social media platforms

新しい行があります！

だから、Gmailのようなプロフェッショナルなものを作りたい

ページを縮小している間、タイトルも縮小しています。タイトルのサイズではなく、タイトル自体が次のようになります。

//social networks - The ability to easily bookmark or share content

タイトルの一部が削除されました。JavaまたはHTMLで、これをどのように行うのかわかりません。

私はこのトリックを実行して私のデザインのビューティーを保存したい

あなたが私を理解していなかったら

この写真を見てください

ここに画像の説明を入力してください

4

2 に答える 2

2

Googleがこれを行った正確な方法はわかりませんが、考えられる解決策はたくさんあります。頭に浮かぶのは次のとおりです。

まず、タイトルの高さを同じ高さに制限し、line-height指定overflow: hidden;します。次に、オプションで、切り取りたくないスペースを。に置き換えます&nbsp;。このように、コンテナのサイズが変更されると、タイトルは表示されていない別の行に折り返されます。

デモについては、このフィドルを参照してください。

于 2012-06-29T08:06:15.230 に答える
1

jQueryThreeDotsプラグインを見てください。

これは、長すぎる場合にテキスト行の最後に省略記号を配置します。

省略記号=...

例： This virtual long text-line is really long with many charact...

これがプラグインのデモページで、多くのライブ例があります！

于 2012-06-29T08:16:24.877 に答える