JavaScript容器を超えた後、erlypsis効果を表示します
実際のプロジェクトでは、テキストコンテンツの長さの不確実性とページレイアウトの固定性により、テキストコンテンツがDiv（または他のタグ、以下と同じ）領域を超えることは避けられません。この時点でのより良い方法は、テキストが限られたdiv幅を超えたときにerlypsis（…）に自動的に表示することです。このようにして、Customによれば、人々はここに省略されているテキストがあることを知っているでしょう。 CSSには、Text-overflow：Ellipsisと呼ばれるプロパティがあります。たとえば、CSSを使用して次のように書くことができます。
{width：27em;ホワイトスペース：nowrap;テキストオーバーフロー：省略記号; -o-text-overflow：ellipsis;オーバーフロー：隠し;}テキストオーバーフロー楕円はFirefoxブラウザのみで実装できず、テキストは真ん中から直接削除されます。 CSSを使用してこれを実装する方法については話しません。特定のCSS実装は、Baiduで使用できます。ここで最も重要なことは、JSでそれを実装する方法と、JSを介してシンプルなコンポーネントを書く方法です。 JSの初期化方法を直接呼び出して実装できます！たとえば、次の効果：
背面のドットとドットは、そのような効果を完了するために表示されていないコンテンツが増えていることをユーザーに促します！
最初にナンセンスを減らしてください！まず、私が行ったデモ効果を見てみましょう。あなたはそれが何であるかを理解するでしょう！
効果を確認したい場合は、私をクリックしてください！わかりました？
1：コンポーネント構成アイテムを最初に見てみましょう。
TargetCl
null、ターゲットが傍受するために必要なアイテムはデフォルトでnullです
limitlineNumber1、表示する行の数はデフォルトで1行です
タイプ '...'、コンテナの長さを超えるタイプは、デフォルトで省略記号に表示されます
LineHeight 18、DOMノードのデフォルトラインの高さは18です
ISSHOWTITLE True、すべてのコンテンツを表示するにはタイトルが必要です。デフォルトは真です
ISCHARLIMITキャラクターの長さに基づいて省略記号を表示するための誤った制限
maxlength 20デフォルトの長さは20です。文字20を超えた後、楕円は表示されます。
2：分析
1.最初に、このコンポーネントについて説明しましょう。文字列を傍受する2つの方法をサポートします。最初：キャラクターの長さに応じて傍受し、それを超えた後の楕円を表示します。たとえば、私はそれをこのように呼びます：
新しいMultiEllipsis（{
"Targetcls"： '.text8'、
「ischarlimit」：本当、
「maxlength」：18
}）;
この方法での初期化は、IsCharlimitが真であることを意味します。これは、文字の数と傍受することを意味します。最大長の最大長は18です。この方法での初期化は、コードが最初にisCharlimitが真である場合、次のコードなどの文字の数に従って直接傍受されることを決定するためです。
2。2番目のタイプは、行と高さの数に基づいて傍受されます。たとえば、デフォルトの構成アイテムのライン高さは18です。2行を表示する場合、つまり高さh = 18*2。コンテナの高さが100の場合、傍受方法は次のとおりです。
（100-タイプ-1の長さ）が18×2を超えるかどうかを使用して、それが大きい場合は傍受し続けます。そうしないと、傍受されず、楕円効果が表示されます！次のコード：
短所：ただし、高列のインターセプトを使用する場合、データが比較的少ない場合は問題ありませんが、500ピクセル以上の高さなどの多くのデータがある場合は、パフォーマンスに比較的影響します。
すべてのJSコードは次のとおりです。
コードをコピーします
/ * * jsに基づくmultielypsis * @author tugenhua */ function multielypsis（options）{var self = this; self.options = $ .extend（{}、defaults、options || {}）; self._init（）; } $ .extend（MultiEllipsis.prototype、{// page initialization_init：function（）{var self = this、cfg = self.options; if（cfg.targetcls + ""）[0] == undefine）{if（windoconsole.log） empty！ "）;} return;} if（cfg.issohohtitle）{//タイトル属性を追加するvar title = self.getText（）; $（cfg.targetcls）.attr（{" title "：title"：title}）;} // charce by of rection of a height; } self._compareheight（cfg.lineheight * cfg.limitlineNumber）、 / * * @method _Charcompare {private} * @returnは、新しい文字列をコンテナに戻しますself.getText（）;それ以外の場合は、HTMLコンテンツに直接移動します。 function（text）{var self、cfg = self.options; ""）[0]） maxlineheight）{self._deleteText（self.getText（））; Text.Substring（Text.Length -1）; function（）{var self = cfg = self.options; var defaults = {'targetcls'：null、//ターゲット「limitlineNumber」によって傍受されるコンテナ：1、//行数に制限されている行数*ラインの列高さ* =コンテナの「タイプ」の高さ： '...'、//デフォルトで表示される長さの長さが表示されます。 node'isshowtitle '：true、//タイトルがすべてのコンテンツを表示するかどうかはデフォルトで「ischarlimit」：false、//ディスプレイellipsisは文字「maxlength」の長さによって制限されます：20 //デフォルトは20}です。JavaScriptがコンテナを超えた後の楕円効果を表示する上記の方法（1行または複数の行と互換性があります）は、私が共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。