FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる
Result text-align: justify;が使えれば楽だけどそうもいかないのでJavaScriptで揃える、というのはかなり昔からある方法ですが、最近はflexboxが普通に使えるようになったので、spanで文字を囲ってdisplay:flex;で揃えれられるし、いろいろ応用も効きそうですね 他ライブラリに依存せず、バニラなコードとなっています var lines = document.querySelectorAll(".text-line"); var appendages = document.querySelectorAll(".append"); // 各文字をspan要素で囲う var wrapCharacters = function(lines) { return lines.forEach(function(line) { var characters = l
CSSのtext-overflowではみ出したテキストを「…」表示
CSSのtext-overflowでellipsisを指定すると はみ出したテキストを、javascriptや、jsp、phpなどを使わなくても省略表示できます。 意外とIEでも6から対応しているので、仕事でも心置きなく使えます。 2014/05/10 制作日誌更新！ある日のランチ風景をレポート！ 2014/05/08 movieに予告編ｘｘ版を追加しました 2014/05/05 制作日誌更新！主演のｘｘｘｘさんを直撃！ text-overflowを有効にする4つの条件 text-overflowは、表示領域からテキストがはみ出した場合 末尾に省略記号の「…」を表示するかどうか指定するCSSプロパティです。 そのため、text-overflowが表示領域とはみ出しを認識できるよう 幅指定で「表示領域」をつくって 改行禁止やはみ出し禁止で「はみ出す」概念を準備しないと効果がありません。 幅指
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
