🐘
一定のサイズのボックスの中で可変の長さのテキストを改行せずに1行で納める
作成日:
2021/12/03
2
一部のコードだけですが、ポイントとなる部分のみメモ
テキストの長さをwidthで取得し、translateを使うことで表現できる
.index_oneline = spanの中のテキストクラス。一つのボタンに複数行あるためここではeachを使って一文ずつ取り出しています。
parentWidth = 親要素の幅 - 10を既定のテキスト幅として指定
/** サイズ修正処理 */
const index_oneline = $popup.find(‘.index_oneline’);
let parentWidth = 0;
index_oneline.each(i=>{
const line = index_oneline.eq(i);
const width = line.width();
if (!i){
parentWidth = line.parent().width()-10;
}
if ( width > parentWidth ) {
line.css({
‘transform’: `${width > parentWidth+10 ? `translateX(${(parentWidth+10-width)/2}px) ` : ‘’}scaleX(${(parentWidth)/width})`
});
}
});