まず、ラインの長さとは？ラインの長さは、マルチラインテキストの本文を保持する容器の長さです。 「マルチライン」がここで重要な部分です。これは、テキストの行の始まりが前のテキスト行の終わりから遠すぎる場合、テキストが読みやすくなるからです。これにより、ユーザーは誤ってラインを読み直し、一般的に読書中に迷子になります。

幸いなことに、Webコンテンツアクセシビリティガイドライン（WCAG）は、従うのが非常に難しいルールを提供します。ライン上の80文字以下（言語が中國語、日本人、または韓國語の場合は40文字）は、文字（CH）ユニットを使用して非常に簡単に実裝できます。

幅：80CH;

1CHの幅は、選択したフォントの數(shù)値0の幅に等しいため、正確な幅はフォントに依存します。

最適なライン長を設(shè)定します

ラインで最大80文字を許可されているからといって、その數(shù)を目指しなければならないという意味ではありません。 Baymard Instituteの調(diào)査では、50?75文字のラインの長さが最適な長さであることが明らかになりました。これは、ラインの長さが小さくなることをより多くのラインを意味し、したがって、ユーザーが読書の間違いを犯す機會を増やすことを考慮しています。

そうは言っても、考えるべき応答性のあるデザインもあります。そのため、最小幅（Min-Width：50CH）を設(shè)定することは、320ピクセルの幅の畫面/ウィンドウサイズなど、50文字をラインに適合させる可能性が低いため、良い考えではありません。したがって、少しのニュアンスが関係しており、それを処理する最良の方法は、clamp（）とmin（）関數(shù)を組み合わせることです。

• clamp（）：パーセンテージ、ビューポート、またはコンテナクエリユニットを使用して、最小限と最大制約を使用して、コンテナに関連する流體値をコンテナに関連付けます。
• min（）：コンマ區(qū)切り値のリストから最小値を設(shè)定します。

min（）から始めましょう。議論の1つは93.75VWです。コンテナがビューポート全體に伸びていると仮定すると、これはビューポート幅が320pxの場合（適合しているように20pxの間隔を配布できる）、ビューポート幅が1440pxの場合は1350pxであると仮定して、これは300pxに等しくなります。ただし、他の引數(shù)（50ch）が2つの値の中で最小である限り、それはmin（）が解決する値です。

 min（93.75VW、50CH）;

次はClamp（）です。これは、次の順序で3つの引數(shù)を受け入れます。最小値、優(yōu)先値、最大値です。これがラインの長さを設(shè)定する方法です。

最小値については、50倍のラインの長さを設(shè)定しますが、條件付きのみを設(shè)定します。前述のように、最大値については、75CHをお勧めします。優(yōu)先値は完全にあなた次第です。これは、最小または最大値に達していない場合のコンテナの幅になります。

幅：クランプ（min（93.75VW、50CH）、70VW、75CH）;

さらに、これらの引數(shù)のいずれかでmin（）、max（）、およびcalc（）を使用して、さらなるニュアンスを追加できます。

容器が狹すぎると感じると、フォントサイズが大きすぎる可能性があります。幅が広すぎると、フォントサイズが小さすぎる可能性があります。

テキストをコンテナに適合させる（JavaScriptを使用）

コンテナの幅に合うようにテキストが作成されているデザイントレンドを知っていますか？通常、利用可能なスペースをできるだけ多く活用するには？マーケティングページやブログ投稿の見出しに適用されることがよくあります。さて、クリスは2018年にそれについて書き、JavaScriptまたはJQueryで効果を達成するためのいくつかの方法を切り上げました。殘念ながら制限がありました。ただし、エンディングは、ビューボックスの値を知っている限り、SVGを使用できることを明らかにしており、実際にそれらを取得するためのトリックがあります。

まだ3?5行のJavaScriptが必要ですが、これは私が見つけた最短の方法です。また、特にSVGが多くのCSSプロパティを継承しているため、HTMLとCSSに完全にスライドします（Fill：CurrentColorのおかげで色を含む）。

<h1>
  <svg>
    <text>テキストをコンテナに取り付けます</text>
  </svg>
</h1>

H1.Container {
  / *コンテナサイズ */
  幅：100％;

  /*タイプスタイル（<text> それらのほとんどを継承します） */
  フォント：900 1EM System-UI;
  色：HSL（43 74％3％）;

  文章 {
    /*
      色の代わりに塗りつぶし：ここで使用する必要があります
      ただし、CurrentColorを使用して色を継承できます
    */
    塗りつぶし：CurrentColor;
  }
}</text>

 / *すべてのsvgsを選択 */
const svg = document.queryselectorall（ "svg"）;

/ *すべてのsvgsをループ */
svg.foreach（element => {
  /*の境界ボックスを取得します<text> 要素 */
  const bbox = element.queryselector（ "text"）。getbbox（）;
  / * biewboxとしてbodingボックス値をSVG要素に適用します */
  element.setattribute（ "Viewbox"、[bbox.x、bbox.y、bbox.width、bbox.height] .jein（ ""））;
}）;</text>

テキストをコンテナにフィットする（純粋なCSS）

純粋なCSSメソッドで地獄に曲がっている場合、あなたは幸運です。しかし、最近のCSSでできる非常識なことにもかかわらず、ローマンコマロフの幅に合ったハックは少し複雑です（かなり印象的ですが）。これがその要點です：

• テキストは數(shù)回複製されています（Aria Hiddenでアクセスできるように隠されていて、文字通り視界で隠されています：隠されたもの：隠されています）。
• コンテナクエリ/コンテナクエリユニットを使用すると、數(shù)學(xué)には、テキストのインラインサイズをコンテナのインラインサイズで除算してスケーリング係數(shù)を取得します。これを使用して、可視テキストのフォントサイズで使用して成長または縮小します。
• スケーリングファクターをユニットレスにするために、tan（atan2（））タイプキャスティングトリックを使用します。
• 特定のカスタムプロパティは、@property at-ruleを使用して登録する必要があります（それ以外の場合は、意図したとおりに機能しません）。
• 最終的なフォントサイズの値は、clamp（）を利用して最小および最大フォントサイズを設(shè)定しますが、これらはオプションです。

<span>
  <span>
    <span>
      <span><span>適合するテキスト</span></span>
      <span aria-hidden="true">適合するテキスト</span>
    </span>
  </span>
  <span aria-hidden="true">適合するテキスト</span>
</span>

.text-fit {
  ディスプレイ：Flex;
  コンテナタイプ：インラインサイズ。

   - キャプチャされた長さ：初期;
  -Support-Sentinel：var（-captured-length、9999px）;

  ＆> [aria-hidden] {
    可視性：隠された;
  }

  ＆>：not（[aria-hidden]）{
    フレックスグロー：1;
    コンテナタイプ：インラインサイズ。

     - キャプチャされた長さ：100cqi;
     - 利用可能なスペース：var（ - キャプチャレングス）;

    ＆> * {
      -Support-Sentinel：継承;
       - キャプチャされた長さ：100cqi;
       - 比例：タン（
        atan2（
          var（ - 利用可能なスペース）、
          var（ - 利用可能な空間） -  var（ - キャプチャされた長さ）
        ））
      ）;
       - フォントサイズ：クランプ（
        1em、
        1em * var（ - 比率）、
        var（-max-font-size、infinity * 1px）-var（ -  support-sentinel）
      ）;
      インラインサイズ：var（ - 利用可能なスペース）;

      ＆：not（.text-fit）{
        表示：ブロック;
        font-size：var（ -  font-size）;

        @container（inline-size> 0）{
          ホワイトスペース：nowrap;
        }
      }

      / *光學(xué)サイジングを使用する可変フォントに必要です */
      ＆.text-fit {
        -captured-length2：var（ -  font-size）;
        font-variation-settings： "opsz" tan（atan2（var（ -  captured-length2）、1px））;
      }
    }
  }
}

@property  -  captured-length {
  構(gòu)文： "<length> ";
  初期値：0px;
  継承：true;
}

@property  -  captured-length2 {
  構(gòu)文： "<length> ";
  初期値：0px;
  継承：true;
}</length></length>

新しいテキストグロウ/テキストシュリンクプロパティに注意してください

CSSのわずか1行で可能なコンテナにテキストをフィッティングするために、多くのソリューションが議論されています。好まれるソリューションは、2つの新しいテキストグローとテキストシェリンクのプロパティのようです。個人的には、2つの異なるプロパティが必要だとは思いません。実際、私はよりシンプルな代替、フォントサイズ：Fit-widthを好みますが、テキストグローとテキストシェリンクはすでにテーブルにあります（Chromeはプロトタイプを目指しているので、追跡できます）、それらがどのように機能するかを見てみましょう。

最初に知っておく必要があるのは、提案されているように、テキストグローとテキストシェリンクのプロパティがコンテナ內(nèi)の複數(shù)のラップのテキストに適用できることです。これは、JavaScriptテクニックやRomanのCSSテクニック（各ラインには獨自のコンテナが必要です）ではできないため、それは巨大です。

どちらも同じ構(gòu)文を持っているので、成長と縮小の両方を許可する場合は両方を使用する必要があります。

テキストグロー：<fit-target><fit-method> ？<length> ？;
テキストシュリンク：<fit-target><fit-method> ？<length> ？;</length></fit-method></fit-target></length></fit-method></fit-target>

• • PER-LINE：テキストグロウの場合、コンテナよりも短いテキストの線はそれに合うように成長します。テキストシュリンクの場合、コンテナよりも長いテキストの行が収縮して収縮します。
  • 一貫性：テキストグロウの場合、最短線はコンテナに合うように成長しますが、他のすべてのラインは同じスケーリング係數(shù)で成長します。テキストシュリンクの場合、最も長い線が縮小してコンテナに合わせて収縮し、他のすべてのラインは同じスケーリング係數(shù)によって縮小します。
• （オプション）
  • スケール：フォントサイズを変更する代わりに、グリフをスケーリングします。
  • スケールインライン：フォントサイズを変更する代わりにグリフをスケーリングしますが、水平方向にのみ。
  • フォントサイズ：それに応じてフォントサイズを成長または縮小します。 （デフォルト値がどうなるかわかりませんが、これがそうなると思います。）
  • 文字間隔：文字間隔は、フォントサイズの代わりに成長/縮小します。
• （オプション）：テキストグロウまたはテキストシェリンクの最小フォントサイズの最大フォントサイズ。

繰り返しますが、これは成長し、すべてのラインを縮小してCSSの1行に適合するようにすべてのラインを縮小するので、私はフォントサイズ：フィットワイドアプローチを好むと思います。上記の提案は、私が望む以上に多くのことを行い、すでに多くの障害を克服する必要があります（その多くはアクセシビリティ関連です）。それは私だけです、そして私はコメントであなたの考えを知りたいと思っています。

結(jié)論

數(shù)年前よりもCSSでラインの長さを設(shè)定する方が簡単です。これで、キャラクターユニット、clamp（）およびmin（）（およびmax（）とcalc（）が、それらを投げたい場合はcalc（）、およびsvgsとcssでできる奇抜なことをコンテナに適合させることができます。少なくともいくつかのシナリオでは、テキストグロウとテキストシェリンク（または同等のソリューション）が本當(dāng)に必要なもののように見えます。

私たちがそこに著くまで、これは計量するのに良い時期です。これは、GitHubの問題にフィードバック、テスト、ユースケースを追加することで行うことができます。

以上がCSSのライン長を設(shè)定します（およびコンテナにテキストを取り付ける）の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。