【DOM】jQureyでリストないの改行箇所のみ行間を狭くする

2017.03.27

■目的
liタグに設定したline-heightが改行した際にも適用され、1つの項目が2つ分の高さになるので、行間を狭め１つの項目だとわかりやすくする。

■ポイント
・改行になるテキストの長さを取得
・その長さをブレイクポイントに条件式でcssの適用を変える

■jQurey

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style>
$(function(){
    var $setElm = $('#demo li a'); //リスト内の文字があるセレクタを指定
    var changeLineheight = '10';   //1行に入る文字数を入れる

    $setElm.each(function(){
       var textLength = $(this).text().length;
       
       if(changeLineheight < textLength){
       $(this).css('line-height','1.35');　//　改行なし（liタグ全体）の行間の高さ

       }else if(changeLineheight > textLength){
          $(this).css('line-height','1.95');　//改行する部分の行間の高さ

        }
    });
});

</style>

<style>

$(function(){

var $setElm = $('#demo li a'); //リスト内の文字があるセレクタを指定

var changeLineheight = '10'; //1行に入る文字数を入れる

$setElm.each(function(){

var textLength = $(this).text().length;

if(changeLineheight < textLength){

$(this).css('line-height','1.35');　//　改行なし（liタグ全体）の行間の高さ

}else if(changeLineheight > textLength){

$(this).css('line-height','1.95');　//改行する部分の行間の高さ

}

});

</style>

■HTML＆CSS

<ul id="demo">
  <li><a>デモデモデモデモデモ</a></li>
  <li><a>デモデモデモデモデモデモ</a></li>　<!-- 改行がある(10文字以上)のでここだけ行間変更される　-->
  <li><a>デモデモデモデモデモ</a></li>
  <li><a>デモデモデモデモデモ</a></li>
  <li><a>デモデモデモデモデモ</a></li>
</ul>