表示される文字列の量を制御できるテクニック (javascript、CSS、何でも???) を探しています。文字列は検索の結果です (したがって、最初は不明です)。単純な文字数のアプローチは簡単ですが、プロポーショナル フォントを処理する必要があるため、受け入れられません。言い換えると、70 ピクセルに制限したい場合、以下の例は異なる文字数 (9 と 15) を示しており、どちらも同じ測定値です:-
ようこそ M...
こんにちは Iain なら ...
Yahoo の検索結果を見ると、タイトル文字列の長さを制限したり、長い文字列の末尾に省略記号を追加して詳細を示したりすることができます。(site:loot.com wireless+keyboard+and+mouse を試して、Yahoo がこれを達成した例を確認してください)
何か案は？
と組み合わせて、おそらく CSS プロパティoverflow: hidden;が役に立ちますwidth。
固定幅のスパン、overflow-x:hidden および white-space:nowrap を使用することから始めます。
クロス ブラウザ シナリオで省略記号を取得するのは困難です。IE には text-overflow:elipsis がありますが、これは非標準です。これは Opera の -o-text-overflow でエミュレートされます。ただし、mozilla にはこれがありません。yahoo Javascript API がこれを処理します。
Yahoo はこれをサーバー側で行い、切り捨てと省略記号 ('...') が HTML で返されます。おそらく、これは文字数で行われます。それがオプションでない場合は、サーバー側が機能しません。
CSSoverflow: hiddenがここで役立つかどうかはわかりません。Javascript を使用して含まれている要素の幅を測定し、それに基づいてテキストを切り捨てることができます。overflow:hidden;これは、テキスト要素のサイズが突然変更されるのではなく、測定を行うためにテキストを抽出して一時的な要素をページのどこかに追加しなければならない場合があるため、と組み合わせて使用できます。切り捨てる要素の数によっては、うまくいかない場合があります。
もう 1 つのちょっとハックなオプションは、文字 ' ' を含む要素の幅を測定Wし、文字数を数えて切り捨てます(char_count * width_of_w) > desired_width。
これはtext-wrap: none;CSS3 プロパティであり、最後に確認したのは IE でのみサポートされていました (これを見つけたときのショックを想像してみてください!)。
クロスブラウザーのピュア CSS ソリューションについては、Hedger Wang の text-overflow:ellipsis プロトタイプをご覧ください。
CSS の場合: .class-name{ width: 5em; 空白: nowrap; テキストオーバーフロー: 省略記号; }
それがあなたを助けることを願っています。