2019年04月28日(日)

FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる

• 0
• 1
• 25
• 50

Result

See the Pen Flexible Full-Width “Justified” Text Blocks by kachibito
(@kachibito) on CodePen.

text-align: justify;が使えれば楽だけどそうもいかないのでJavaScriptで揃える、というのはかなり昔からある方法ですが、最近はflexboxが普通に使えるようになったので、spanで文字を囲ってdisplay:flex;で揃えれられるし、いろいろ応用も効きそうですね

他ライブラリに依存せず、バニラなコードとなっています

JavaScript

var lines = document.querySelectorAll(".text-line"); var appendages = document.querySelectorAll(".append"); // 各文字をspan要素で囲う var wrapCharacters = function(lines) { return lines.forEach(function(line) { var characters = line.innerHTML.spl...