CSSのみで文末をカットし、…を代入する方法

以前、あるコーディングの案件を受けている時に、ニュースの文で文末を…にしてほしいと言われ、それはコーディングですることじゃなくてシステムでやるのではないかと思ったのですが、いざ調べてみると、CSSで出来る方法がありました。

早速説明していきます。
DEMOもありますのでご覧ください。

DEMO

CSSのみで文末をカットし、…を代入する方法

html


 <div class="text">
  	<p class="textCut">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</p>
 </div>

<p class="textCut">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</p>

</div>

css


.text {
  width: 400px;
}
.text .textCut {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text {

width: 400px;

}

.text .textCut {

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

すべて必須になります。
text-overflowのellipsisという値で…を代入するようです。
横幅の設定はその要素でも、親の要素でも大丈夫です。

そしてこれは横幅で指定し、それ以上のテキストを消すというものなので、
複数行に対応しておらず、一行の場合のみとなります。

複数行、もしくは文字数を設定したい場合、jQueryを使用すれば可能です。

jQueryでやる方法

htmlは同じで、
jQueryのソースは以下になります。


$(function(){
	var elm = $('.textCut2');//対象
	var cutNum = '55';//文字数
	var endTxt = '…';//何を代入するか

	elm.each(function(){
		var textLength = $(this).text().length;
		var textTrim;
		if(cutNum < textLength) {
			textTrim = $(this).text().substr(0,(cutNum));
			$(this).html(textTrim + endTxt);
		}
	});	
});