【IE対応】テキストの末尾を「…」省略できるline-clampを簡単に実現する

テキストの末尾を行数を指定して「…」省略できるline-clampを使ってみたものの
IEには非対応だったので、jQueryを使ってIE対応してみました。

CSS

/* 行数指定部分 PC2行表示*/
.block-item-comment {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* 行数指定部分 SP3行表示*/
@media screen and (max-width: 700px){
	.block-item-comment {
	   -webkit-line-clamp: 3;
	}
}

まず、以下から、clamp.jsダウンロード

サンプルコード

<script src="../clamp.js"></script>
<script>
var header = document.getElementsByTagName('body')[0].getElementsByTagName('h1')[0];
$clamp(header, {clamp: 1, useNativeClamp: false});
</script>

＊＊＊＊

JS

jQuery(function ($) {
  if($(".block-item-comment").length > 0){
    $(".block-item-comment").each(function(i, elem) {
      $clamp(elem, {clamp: 2})
      console.log(elem)
    });
  }
});

参考URL：https://blog.webico.work/css-line-clamp#UAIE11