表の項目名とか１行のテキストを両端揃えにする CSS + jQuery

表の項目名を、両端揃えにするやつやりたい！

こういうやつ！

なるほど、やってみましょう。

実装

真っ先に思い浮かんだのは、text-align: justify; ですが、これはなんとまだSafariで使えないとのこと。

みんなIEのことなんやかんや言ってるけど、Safariも大概しんどいよ・・・。

というわけで、以下のように考えてみました。

①要素内のテキストを１文字ずつspanで囲む
②display: flex; で、両端揃えにする

まず基本のhtmlはこんな感じ。今回は説明を省くため、表ではなく項目名だけリストにしてますが、だいたいどんな構造でもいけます。

<ul class="list">
  <li><p class="justify">設立</p></li>
  <li><p class="justify">代表者</p></li>
  <li><p class="justify">住所</p></li>
  <li><p class="justify">事業内容</p></li>
</ul>

</ul>

①要素内のテキストを１文字ずつspanで囲む

設立

みたいな感じで１文字ずつ囲っていくわけですが、これを全部手動でやるのはめんどくさすぎるので、ここはjQueryのパワーを借りましょう。

$('.justify').each(function() {
  var content = $(this).html();
  var text = $.trim(content);
  var newHtml = "";
  text.split("").forEach(function(v) {
    newHtml += "<span>" + v + "</span>";
  });
  $(this).html(newHtml);
});

$('.justify').each(function() {

var content = $(this).html();

var text = $.trim(content);

var newHtml = "";

text.split("").forEach(function(v) {

newHtml += "" + v + "";

});

$(this).html(newHtml);

});

これで、.justifyごとに全て１文字ずつspanで囲まれます。
もちろんjQueryでなくてもできますので、自分の環境に合わせ、「JS １文字ずつ span」でググってみてください。

②display: flex; で、両端揃えにする

両端揃えにする前に、横幅を確定しておく必要があります。
ここは、一番多い文字数に合わせ、emで設定してみました。

.justify {
  width: 5em;
  display: flex;
  justify-content: space-between;
}

.justify {

width: 5em;

display: flex;

justify-content: space-between;

}

これで、両端揃えになります！

現場からは以上です。