正確な幅のdivボックスにテキストを挿入する必要があります。
すべての主要なブラウザでテキストを同じサイズに見せる方法(JavaScriptなど)はありますか?
たとえば、テキストが 'div'ボックスに収まらない場合は、いくつかの文字を削除します。さまざまなブラウザのテキストのサイズ(幅)
答えて
まず、フォントの面とサイズをCSSで設定します。そうすれば、ほとんどの場合同じ幅になります。
次に、オーバーフローを追加できます。あなたの部門にそれが終わりを過ぎて行くものを表示しないように。
どのようにこれをやっているかによって、幅を設定せずに余白と余白を使用することができます。つまり、divに常に収まります。これはあなたが望むものではないかもしれませんが。
フォントとサイズを設定しました。しかし、FFとChromeのテキストの違い(幅)。ここに例があります - http://imghs.com/i/NeZvKsiBVRbf/ – pi11
あなたのページレイアウトは何ですか?さまざまなテキスト幅をサポートするためのより良い方法があります。たぶん必要以上に幅を設定し、テキストを中央に配置しますか? – xthexder
私の場合、テキストはユーザー入力からのものです。だから彼らのサイズは常に異なっています。出力前にpythonで文字を切り捨てることはできますが、divボックス全体をテキストで埋める必要があります。そして私は正確なフォント幅を見積もることはできません。 – pi11
ちょうどあなたのdivのCSSルールに次のプロパティを追加します。
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
することができますsee this in action here (JSFiddle)。
ニース。残念ながら私のFF4はテキストオーバーフローをサポートしていません:省略記号。 – pi11
@ pi11 - これはよく知られたFFの問題です(http://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox-4-and-ff5を参照)。おそらくFF7は最後に省略記号をサポートしています... –
CSSまたはJavaScriptを使用してテキストを切り捨てることができます。ここにテキストが切り捨てられた場合、リンク「詳細を表示し」することができます私が書いたシンプルなjQueryの切り捨てプラグインの例です:
$.fn.trunc = function(_break_at) {
var _article = jQuery(this).text();
var _leader = [];
var _trailer = [];
var _substr = _article.split(' ');
$(this).wrapInner('<div class="long"></div>');
$.each(_substr, function(i, data) {
if (i < _break_at) {
_leader.push(data);
}
});
if (_substr.length > _break_at) {
$('<div/>').addClass('short').html(_leader.join(' ')).prependTo(this);
$('<span/>').appendTo('.long').addClass('toggle').html(' << Show less');
$('<span/>').appendTo('.short').addClass('toggle').html('... Show more >>');
}
$('.toggle').click(function() {
$('.short, .long').toggle('show');
});
};
$(function() {
// This is how you use it
$('#article_body').trunc(2);
});
ありがとうございます、しかし、どのようにテキストの各行に_break_at値を見積もりますか?たとえば、このテキスト - "lllllll"とこのテキスト - "WWWWWW"は幅が異なります(モノスペースフォントでない場合)。 – pi11
- 1. さまざまな幅のApple GLPaint
- 2. さまざまなブラウザのピクセルサイズ
- 3. さまざまなブラウザでさまざまな高さのHTML要素
- 4. ペイント法でさまざまなサイズのテキストを描画する方法は?ブラックベリー
- 5. さまざまなブラウザで異なるJavaScriptの動作
- 6. さまざまなブラウザでのCSSの互換性の問題
- 7. さまざまなサイズのトレーニングデータの精度のばらつき
- 8. さまざまなサイズの行列に空の行を作成
- 9. さまざまなサイズの列が一揃いのWebサイト?
- 10. さまざまなブラウザのタイムアウト動作ですか?
- 11. Pixelmatorさまざまなサイズのスクリプトをエクスポートする
- 12. さまざまなサイズのウェブページを印刷する
- 13. さまざまな向きのストーリーボード、エッジ、さまざまなビュー
- 14. さまざまなブラウザとさまざまなバージョン間で機能をテストするツールはありますか?
- 15. さまざまなブラウザで異なるアラインメント
- 16. javascriptはさまざまなブラウザで動作しません
- 17. さまざまな画面幅を切り替えるモバイルスタイルシート
- 18. さまざまなサイズがAndroidをサポートしていますか?
- 19. さまざまなコンテナの幅を持つ画像の上にテキストを浮かべるより良い方法
- 20. さまざまなブラウザでjQueryプラグインをテストする
- 21. CSSシステムの色:さまざまなブラウザ/オペレーティングシステムパラメータのマッピングがありますか?
- 22. Androidはさまざまな画面をテキスト化します
- 23. さまざまな画面サイズでキャンバスを操作する
- 24. node.jsのMemcacheがさまざまなサイズのオブジェクトを返しています
- 25. さまざまなブラウザに対するJavascriptコードの継続的な統合/テスト
- 26. オブジェクトファイルと実行可能ファイルの間のさまざまなフィールドのサイズの差
- 27. さまざまなブラウザのjavascriptでクライアント側のファイル内容を読み取る
- 28. さまざまなブラウザ用のテスト環境を設定するためのガイド
- 29. 個々のliの幅をul内のさまざまな幅で計算するには
- 30. Android-さまざまな画面サイズの画像を調整します
隠されたCSSのオーバーフローが常にあります。 – kojiro
これは私には適していません。オーバーフロー隠しは、中央の文字をカットすることができます。 – pi11
@ pi11:「div 'ボックスにテキストが収まらない場合、いくつかの文字を取り除く」とはどういう意味ですか? –