0

古い Gecko エンジン (1.9 だと思います) を搭載した TV 用のアプリを開発しています。250x40 のコンテナーがあり、 2 行のテキストを入れたいのですが、長すぎる場合は省略記号を表示する必要があります (CSS3 プロパティのようにtext-overflow: ellipsis)。

ただし: - CSS3 を使用できません。 - jQuery プラグインをいくつか使用してみましたが、動作が遅すぎます。実際には、テキストがコンテナーに収まるまで縮小されていることがわかります。

文字を数えてみたのですが、幅が違うのでうまくいきません。各文字をその幅にマッピングし、テキスト全体の幅を数えてみましたが、2行であるという事実がすべてを台無しにします-テキストがどの時点で次の行に移動するかわかりません。

どんな助けでも感謝します。

4

3 に答える 3

1

ここのこの章には、javascript を使用し、JQuery を使用しないソリューションがあります。

jsfiddle で実行: http://jsfiddle.net/ZfDYG/

編集 - 2 行のテキストについて少し読んでください: http://jsfiddle.net/ZfDYG/8/

コード (完全を期すため):

String.prototype.visualLength = function() {
  var ruler = $("ruler");
  ruler.innerHTML = this;
  return ruler.offsetWidth;
}
function $(id) {
  return document.getElementById(id);
}
var s = "Some text that is quite long and probably too long to fit in the box";
var len = s.visualLength();

String.prototype.trimToPx = function(length,postfix) {
  postfix = postfix || '';
  var tmp = this;
  var trimmed = this;
  if (tmp.visualLength() > length) {
    trimmed += postfix;
    while (trimmed.visualLength() > length) {
      tmp = tmp.substring(0, tmp.length-1);
      trimmed = tmp + postfix;
    }
  }

  return trimmed;
}
String.prototype.wrapToLength = function(complete) {
  if(complete[this.length] == ' ' || complete[this.length - 1] == ' ') return;

  var wrapped = this;
  var found = false;
  for(var i = this.length-1; i > 0 && !found; i--) {
    if(this[i] == ' ') { 
      wrapped = this.substring(0, i); 
      found = true; 
    }
  }
  return wrapped;
}
var firstLine = s.trimToPx(240).wrapToLength(s);
var secondLine = s.substring(firstLine.length, s.length);
$('output').innerHTML= firstLine+' '+secondLine.trimToPx(240,'...');

HTML:

<span id="ruler"></span>
<div id="output"></div>

CSS:

#ruler { visibility: hidden; white-space: nowrap; }
#output { 
  width: 240px;
  height: 50px;
  border: 1px solid red;
}

あなたのボックスでそれでも遅すぎる場合は、ゆっくりとインクリメントするのではなく、最終的な長さに向かって振動する (バネのようなもの) より大きな追加から開始することで、while ループを高速化できるはずです。

于 2013-10-27T19:11:16.320 に答える