いくつかのよく使われるhtml css整理--テキストの長さの切り取り

div+css設定リストdivが部分的に表示されていません...(1行テキスト)

width:200px; //    ：

overflow:hidden; //       

text-overflow:ellipsis; //           。

white-space:nowrap; //       。             ，           br   

現在のブラウザでは、単行テキストのオーバーフロー表示省略記号を実現するために使用されるtext-overflow:ellipsisプロパティがサポートされていますが、このプロパティでは複数行のテキストはサポートされていません.
マルチテキスト処理、由来http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html

 、 -webkit-line-clamp

Webkit      -webkit-line-clamp   ，      WebKit-Specific Unsupported Property，                 ，   Webkit     ，        。         ，    ，       ~o(∩_∩)o

p {

    overflow : hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}

この私がテストした配合heightの設定chromeは正常で、firefoxは省略記号がありません.
二、-o-ellipsis-lastlineは推奨されていませんが、operaはchromeと同じカーネルを使用しています.

  Opera 10.60   ，text-overflow        -o-ellipsis-lastline  。            ，             。              ，         //(ㄒoㄒ)//

p {

    overflow: hidden;

    white-space: normal;

    height: 3em;

    text-overflow: -o-ellipsis-lastline;

}

三、jQueryはテストしていない、互換性が最も強い
各ブラウザのプライベート属性を除いて、ブラウザにまたがる解決方法はありますか?もちろんjsで実現しました!(エレメントの高さが親エレメントの高さよりも小さくなるまで、末尾の文字を後ろから1つずつ削除します)

$(".figcaption").each(function(i){ var divH = $(this).height(); var $p = $("p", $(this)).eq(0); while ($p.outerHeight() > divH) { $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...")); }; });