Web Design Leaves

以下のように CSS でテキストのインデント幅の指定をして、2行目以降の位置をそろえる場合に、インデントの長さを動的に変更する方法。

p.indentx {
  text-indent: -1em;
  margin-left: 1em;
}

記述方法はその要素に「indentx」というクラスを指定し、インデントする文字幅に指定する文字列の後に「|」を記述する。

例：（p 要素の後に改行を入れると、インデントする文字数が1文字増えるので注意）

<p class="indentx">（注意）|初期設定では、WordPress はクエスチョンマークと多くの数字からなる URL を使用していますが、パーマリンクとアーカイブ用にカスタムな URL 構造を作成することもできます。これにより、リンクの見た目、使いやすさ、そして継続性を改善できます。
</p>

実際の表示：

（注意）|初期設定では、WordPress はクエスチョンマークと多くの数字からなる URL を使用していますが、パーマリンクとアーカイブ用にカスタムな URL 構造を作成することもできます。これにより、リンクの見た目、使いやすさ、そして継続性を改善できます。

jQuery の記述：

• テキスト部分を区切り文字「|」で分割して、最初のテキストの長さを取得。
• テキストから区切り文字を削除。
• テキストをインデントする長さと左マージンを取得したテキストの長さを使って指定。

$('.indentx').each(function() {
   var that = $(this);
   var indent_len = that.text().split('|')[0].length;
   that.text(that.text().replace(/\|/, ''));
   var indent_val = '-' + indent_len + 'em';
   var margin_val = indent_len + 'em';
   that.css({textIndent: indent_val, marginLeft: margin_val});   
});