文字列の操作：
領域幅と行数を指定して文字数を制限
指定したNode内のテキストを取得し、同じ場所で、指定した幅と行数に収まるように文字数を制限して設定する。
元の文字列をトリミングした場合には、文末に指定の文字列やリンクを追加することも可能。
Node
Nodeを指定 id値を文字列で指定してもよい
Number1
CSSで設定している width を指定する px値で指定
- スマホ用のコーディングでpx_vw値を指定している場合には、$numToPX()関数を併用すれば良い。
- (例) px_vw(280) → $numToPX(280)
➜『px_vw値』とは？
Number2
行数を数値で指定する
String
行末に追加する文字列を指定
○元の文字列が1文字以上省略される場合にのみ適用。○追加される文字列に<a>タグでリンクを張ることも可能。
○元の文字列が1文字以上省略される場合にのみ適用。○追加される文字列に<a>タグでリンクを張ることも可能。
●必須引数 ●オプション引数(省略可能)
記述例
$strWidthLine($id('comment'), 300, 3)
$strWidthLine('comment', 300, 2, '...')
$strWidthLine('comment', 300, 2, '<a href=\'target.html\'>[続きを見る]</a>')
戻り値
○指定したNodeや元の文字列はklib内の予約変数(配列)に保管される。
処理後は、格納した配列番号を返す。
・Nodeを保管している配列名：klibStrWidthLineNode
・元の文字列を保管している配列名：klibStrWidthLineBaseStr
○指定したNode／idが存在しない場合
・-1 を返す。
注意点
指定Node内にタグが含まれている場合には、タグは全て削除されてプレーンテキストの扱いとなる。
元の文字列は予約変数内に保管してあるため、繰り返し実行しても問題ない。2回目以降の実行時には、保管してある文字列を元に処理を行う。
動作サンプル
どういう鶴嘴をは殖やしなくがという寄宿舎に述べて来ななけれ。そのため秋刀魚の所ほんの文芸も私ごろを煮えないかとなったある、人の九月でという皆お話なますたば、釣の時から天然より。四人は命じが、今日がどうも傾けるだませとできが、ないですないてしかしご病気を重んずるんませ。
Sass :
#sample1 {
width: 450px;
padding: 15px 25px;
font-size: 16px;
}
Javascript :
$strWidthLine($id('sample1'),450,2);
どういう鶴嘴をは殖やしなくがという寄宿舎に述べて来ななけれ。そのため秋刀魚の所ほんの文芸も私ごろを煮えないかとなったある、人の九月でという皆お話なますたば、釣の時から天然より。四人は命じが、今日がどうも傾けるだませとできが、ないですないてしかしご病気を重んずるんませ。模範の事実に、先刻ごろにこう聴いまでの状態に、これか忘れた話を考えます半分はとうとう立たせ事ですて、そんなにどう理論がくて、その事に儲け事より自由ですなく取り扱わでん。それでまるで今日にしだけは繰り返したという自由ます意味へ通じと、道具からある時この他を働かていですのな。
Sass :
#sample2 {
width: 600px;
padding: 15px 25px;
font-size: 14px;
}
Javascript :
$strWidthLine($id('sample2'),600,4,'...');
どういう鶴嘴をは殖やしなくがという寄宿舎に述べて来ななけれ。そのため秋刀魚の所ほんの文芸も私ごろを煮えないかとなったある、人の九月でという皆お話なますたば、釣の時から天然より。四人は命じが、今日がどうも傾けるだませとできが、ないですないてしかしご病気を重んずるんませ。模範の事実に、先刻ごろにこう聴いまでの状態に、これか忘れた話を考えます半分はとうとう立たせ事ですて、そんなにどう理論がくて、その事に儲け事より自由ですなく取り扱わでん。それでまるで今日にしだけは繰り返したという自由ます意味へ通じと、道具からある時この他を働かていですのな。
Sass :
#sample3 {
width: 700px;
padding: 50px;
font-size: 17px;
}
Javascript :
$strWidthLine($id('sample3'),700,5,' <a href=\'detail.html\'>▶︎続きを読む</a>');
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。