JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでtext-align: justifyのときの最終行の揃え方を設定する方法（textAlignLastプロパティ）

text-align が justify（両端揃え）に設定されている場合、ブロックの最後の行や強制改行の直前にある行は、通常は左揃えで表示されます。この最終行の揃え方を変更したいときに使うのが、CSS の textAlignLast プロパティです。

JavaScript から動的に設定する場合は、style.textAlignLast に right を指定することで、最終行を右揃えにできます。この値は left、center、justify、start、end などにも変更可能です。

サンプルコード

以下のコードでは、ボタンをクリックすると JavaScript の style.textAlignLast を使って、text-align: justify が適用されたブロックの最終行を右揃えに変更する例を確認できます。

<!DOCTYPE html>
<html>
<head>
  <style>
    #myText {
      text-align: justify;
    }
  </style>
</head>

<body>
  <div id="myText">
    This is demo text. This is demo text. This is demo text. This is demo text.
    This is demo text. This is demo text. This is demo text. This is demo text.
    This is demo text. This is demo text. This is demo text. This is demo text.
    This is demo text. This is demo text. This is demo text. This is demo text.
    This is demo text. This is demo text. This is demo text. This is demo text.
  </div>
  <button onclick="display()"> Set Alignment </button>
  <script>
    function display() {
      document.getElementById("myText").style.textAlignLast = "right";
    }
  </script>
</body>
</html>

上記の例では、あらかじめ CSS で #myText 要素に text-align: justify を指定しています。「Set Alignment」ボタンをクリックすると display() 関数が実行され、style.textAlignLast = "right" によって最終行だけが右端に揃えられます。

なお、textAlignLast は Internet Explorer では接頭辞付きの msTextAlignLast が必要でしたが、モダンブラウザ（Chrome、Firefox、Edge など）では標準のプロパティ名でそのまま利用できます。

  1. JavaScriptで要素を水平方向に配置する方法【cssFloatプロパティの使い方】

    要素を水平方向に配置（フロート）させるには、JavaScriptのcssFloatプロパティを使用します。cssFloatプロパティは、CSSのfloatプロパティに対応するもので、「left」「right」「none」の値を設定することで、画像やテキストなどの要素を左右どちらかに回り込ませることができます。例えば「right」を指定すると、要素は右側に配置され、その周囲に他のコンテンツが回り込みます。サンプルコード以下のコードを実行すると、ボタンをクリックしたときに画像が右側に水平配置されます。ぜひ試してみてください。<!DOCTYPE html> <html> &n

  2. JavaScriptでフォントをスモールキャピタル（小型大文字）で表示する方法

    テキストをスモールキャピタル（小型大文字）で表示したい場合は、JavaScriptの fontVariant プロパティを使用します。このプロパティに「small-caps」を設定することで、英字テキストが小型の大文字で表示されるようになります。スモールキャピタルとはスモールキャピタル（small-caps）とは、小文字の部分を通常より小さなサイズの大文字で表示する文字スタイルです。見出しや装飾的なテキストなど、デザインにアクセントを加えたい場面でよく利用されます。サンプルコード以下のコードを実行し、ボタンをクリックすると、指定した段落のフォントファミリーとスモールキャピタル表示が設定されます