0

固定幅の div にさまざまな文字と長さのテキスト文字列を表示しています。割り当てられたスペースにできるだけ多くのテキストを収めたいと考えています。私の現在のアプローチは、次の方法でテキスト文字数を制限することです

var n = //some number
string = string.substr(0,n);

このアプローチの問題点は、文字が異なれば幅も異なるため、スピルオーバーが発生する可能性がありますが、未使用のスペースが残ることがよくあります。含まれている div に次の css プロパティを与えようとしました。

div{
   width:200px
   white-space:nowrap
}

ただし、幅を超えると、テキストは次の行に折り返されます。誰かがこの問題に対処するための良い方法で私を助けてくれますか?

4

2 に答える 2

1

あなたはテキストオーバーフローを試すかもしれません

癖モードから：

text-overflow が機能するのは、次の場合のみです。

ボックスに可視以外のオーバーフローがあります (オーバーフロー: テキストが単にボックスからはみ出して表示されます) ボックスに空白があります: nowrap または、テキストのレイアウト方法を制約する同様の方法です。(これがないと、テキストは次の行に折り返されます)

スタイルチェンジ:

div{
   width:200px;
   white-space:nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

ワーキングデモ

于 2013-08-10T01:12:59.063 に答える
0

https://coderwall.com/p/kdi8uaで説明されているような方法を使用して、テキストの実際の幅を計算します。

次に、幅が要素の幅よりも大きくなるまで文字を追加し続け、1 を削除します。

リンク先のサイトの機能は次のとおりです。

// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.html(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};
于 2013-08-10T01:10:42.017 に答える