2

商品のタイトルが書かれた商品リストがあります。商品タイトルが2行を超えていないか確認したいのですが、その場合は2行に収まるように印刷し、最後に「…」をつけてください。

何か案は？

4

5 に答える 5

5

発生する可能性のある問題の1つは、バージョンやオペレーティングシステムが異なっていても、フォントのレンダリングがブラウザごとに異なる可能性があることです。したがって、テキストの長さ/高さを事前に計算することになると、それほど簡単ではありません。あなたはこのようなことをすることができます：

  • 最大の高さのフィールドを作成します
  • このフィールドのオーバーフローを非表示に設定します
  • 次のことを行うJavaScriptを記述します。

__

  • 1テキストを取得
  • 2最後の単語を切り取ります（正規表現などを使用して）
  • 3コンテナにまだオーバーフローがあるかどうかを確認します
  • 4オーバーフローがなくなるまで、ステップ2と3を実行します。
  • 5もう1つの単語を切り取ります（「…」のスペースがない場合でも、ケースが存在する可能性があります）
  • 6「…」を追加

これは、プレーンテキストがある場合にのみ機能します。タイトル内にタグがある場合、このようなものがHTML構造を完全に台無しにする可能性があります。これにより、「<span>」タグが開かれ、閉じられないことを想像してみてください…:)

正規表現/単語ファインダーも、「単語で区切られた」などを切り取るのに非常に優れている必要があります。

これが非常に良いアプローチであるかどうかはわかりませんが、jQueryでは4〜5行のようなものになるため、少し役立つかもしれません。

于 2012-06-15T01:09:54.730 に答える
1

私は最終的に次のようなことをしました：

<p id="titleContainer">blabla bla bla blablabla bla blabla bla bla blablabla bla blabla bla bla blablabla bla</p>

<script type="text/javascript">
  function checkOverflow(el){
    var curOverflow = el.style.overflow;
    if ( !curOverflow || curOverflow === "visible" ){
      el.style.overflow = "hidden";
    }

    // 26 pixels was the height of 2 lines
    var isOverflowing = el.scrollHeight > 26;
    el.style.overflow = curOverflow;
    return isOverflowing;
  }

  var titleContainer = document.getElementById("titleContainer");
  var titleTxt = titleContainer.innerHTML + "...";

  while(checkOverflow(titleContainer)){
    titleTxt = titleTxt.replace(/ [^ ]+\.\.\.$/, "...");
    titleContainer.innerHTML = titleTxt;
  }
</script>
于 2012-06-15T18:55:15.660 に答える
0

@cpilkoが言ったように…固定サイズのフォントでなければ…確かに機能しません…</p>

固定されていないフォントでの30i（小さい文字）とw（大きい文字）

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii

wwwwwwwwwwwwwwwwwwwwwwwwwwwwww

しかし、固定サイズのフォントでは…物事はより予測可能です。

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii
wwwwwwwwwwwwwwwwwwwwwwwwwwwwww
于 2012-06-15T01:14:19.673 に答える
0

必要なのは text-overflow CSS プロパティです。CSS を使用して、固定幅のコンテナー内の余分なテキストを切り取り、オーバーフローを省略記号に置き換えます。続きを読む:

http://www.quirksmode.org/css/textoverflow.html

于 2012-06-15T02:33:29.697 に答える
0

およそ何文字が 2 行に相当するかを確認するには、デザインをいじる必要があります。固定フォントを使用していない場合は、多くのケースを検討する必要があります。

この関数を使用して、サイトの 1 つでこれを行います。これにより、特定の最大文字数にトリムされ、文字列の末尾の前の最初のスペースで文字列が分割されます。

function str_tr($string,$max)
{
 if(strlen($string)>$max)
 {
    $string = substr($string,0,$max);
    $i = strrpos($string," ");
    $string = substr($string,0,$i);
    $string .= "...";
 }
 return $string;
}
于 2012-06-15T01:00:29.533 に答える