首先，什麼是線長度？線長度是容納多行文本的容器的長度。 “多行”是這裡的關(guān)鍵部分，因?yàn)槿绻谋揪€的開頭距離先前的文本末尾，則文本變得不那麼可讀。這會導(dǎo)致用戶錯誤地重讀線條，並且在閱讀時通常會迷路。

幸運(yùn)的是，Web內(nèi)容可訪問性指南（WCAG）為我們提供了一個很難遵循的規(guī)則：在行上不超過80個字符（如果語言是中文，日語或韓語，則使用字符（CH）單元非常容易實(shí)現(xiàn)：

寬度：80ch;

1CH的寬度等於所選字體中數(shù)為0的寬度，因此確切的寬度取決於字體。

設(shè)置最佳行長

僅僅因?yàn)槟谝恍猩献疃嘣试S80個字符，這並不意味著您必須針對這個數(shù)字。 Baymard Institute的一項(xiàng)研究表明，50-75個字符的線長度是最佳的長度 - 這考慮到較小的線長度意味著更多的線，因此，用戶有更多機(jī)會使閱讀錯誤。

話雖這麼說，我們也有響應(yīng)式設(shè)計(jì)要考慮，因此設(shè)置最小寬度（例如，最小寬度：50CH）並不是一個好主意，因?yàn)槟惶赡軐?0個字符適合，例如，屏幕/窗口大小為320像素寬。因此，涉及一些細(xì)微差別，最好的處理方法是結(jié)合夾具（）和min（）函數(shù)：

• clamp（）：設(shè)置使用百分比，視口或容器查詢單元相對於容器的流體值，但具有最小和最大約束。
• min（）：從逗號分隔值列表中設(shè)置最小值。

讓我們從Min（）開始。其中一個論點(diǎn)是93.75VW。假設(shè)容器延伸到整個視口，則當(dāng)視口寬度為320px時，這將等於300px（允許在您看到的時分佈20px的間距）和1350px時，當(dāng)視口寬度為1440px時。但是，只要另一個參數(shù)（50CH）是兩個值中最小的值，那就是min（）將被解析為的值。

最?。?3.75VW，50CH）;

接下來是Clamp（），它按以下順序接受三個參數(shù)：最小值，首選和最大值。這就是我們設(shè)置線長度的方式。

至少，您可以插入Min（）函數(shù)，該功能設(shè)置了50ch線長度，但僅有條件地設(shè)置。對於最大值，我建議75ch，如前所述。首選值完全取決於您 - 當(dāng)不擊中最小值或最大值時，這將是您的容器寬度。

寬度：夾具（Min（93.75VW，50CH），70VW，75CH）;

此外，您可以在任何論點(diǎn)中使用min（），max（）和calc（）來增加細(xì)微差別。

如果容器感覺太窄，則字體大小可能太大了。如果感覺太寬，那麼字體大小可能太小。

將文本適合容器（使用JavaScript）

您知道製作文本以適合容器寬度的設(shè)計(jì)趨勢嗎？通常，要利用盡可能多的可用空間？您經(jīng)常會看到它適用於營銷頁面和博客文章的標(biāo)題。好吧，克里斯（Chris）早在2018年就寫了這件事，為不幸的是，通過限制，通過JavaScript或jQuery實(shí)現(xiàn)效果的幾種方法。但是，結(jié)局表明，只要您知道視框值，您就可以使用SVG，而我實(shí)際上有一個獲取它們的技巧。

儘管它仍然需要3-5行JavaScript，但這是我發(fā)現(xiàn)的最短方法。它還完美地滑入HTML和CSS，尤其是因?yàn)镾VG繼承了許多CSS屬性（包括顏色，感謝Fill：CurrentColor：CurrentColor）：

<h1>
  <svg>
    <text>將文字適合容器</text>
  </svg>
</h1>

H1.Container {
  / *容器尺寸 */
  寬度：100％；

  /*類型樣式（<text> 將繼承其中的大多數(shù)） */
  字體：900 1EM System-UI;
  顏色：HSL（43 74％3％）；

  文字 {
    /*
      我們必須使用填充：而不是顏色：在這裡
      但是我們可以使用CurrentColor繼承顏色
    */
    填充：CurrentColor；
  }
}</text>

 / *選擇所有SVG */
const svg = document.queryselectorall（“ svg”）;

/ *循環(huán)所有SVG */
svg.foreach（element => {
  /*獲取邊界的框<text> 元素 */
  const bbox = element.queryselector（“ text”）.getBbox（）;
  / *將邊界框值應(yīng)用於SVG元素作為ViewBox */
  element.setAttribute（“ viewbox”，[bbox.x，bbox.y，bbox.width，bbox.height] .join（“”））;
}）;</text>

將文本適合容器（純CSS）

如果您是純CSS方法的地獄，那麼您很幸運(yùn)。但是，儘管最近我們可以對CSS做瘋狂的事情，但羅馬·科馬羅夫（Roman Komarov）的寬邊hack有些複雜（儘管令人印象深刻）。這是它的要旨：

• 該文本複制了幾次（儘管隱藏在隱藏的情況下隱藏，並且隱藏在字面上的可見性：隱藏），以便我們可以使用隱藏的數(shù)學(xué)進(jìn)行數(shù)學(xué)，然後將結(jié)果應(yīng)用於可見的元素。
• 使用容器查詢/容器查詢單元，數(shù)學(xué)涉及將文本的內(nèi)聯(lián)大小除以容器的內(nèi)聯(lián)大小以獲取縮放係數(shù)，然後我們將其用於可見文本的字體大小以使其成長或縮小。
• 為了使縮放因子無單位，我們使用tan（atan2（））類型鑄造技巧。
• 某些自定義屬性必須使用@property At-Lule註冊（否則它們不按預(yù)期工作）。
• 最終字體大小的值利用夾具（）設(shè)置最小字體和最大字體尺寸，但它們是可選的。

<span>
  <span>
    <span>
      <span><span>適合寬度的文字</span></span>
      <span aria-hidden="true">適合寬度的文字</span>
    </span>
  </span>
  <span aria-hidden="true">適合寬度的文字</span>
</span>

.text-fit {
  顯示：Flex;
  容器類型：內(nèi)聯(lián)尺寸；

   - 捕獲長度：初始；
   - 支持 - 塞替尼：var（ - 捕獲長度，9999px）;

  ＆> [Aria Hinded] {
    可見性：隱藏；
  }

  ＆>：不（[Aria-Hidden]）{
    Flex Grow：1;
    容器類型：內(nèi)聯(lián)尺寸；

     - 捕獲長度：100CQI;
     - 可用空間：var（ - 捕獲的長度）;

    ＆> * {
       - 支持內(nèi)式：繼承；
       - 捕獲長度：100CQI;
       - 比例：曬黑（tan）（
        atan2（
          var（ - 可用空間），
          var（ - 可用空間） -  var（ - 捕獲的長度）
        ）
      ）；
       - 法尺：夾具（
        1em，
        1em * var（ - 比率），
        var（-max-font-size，infinity * 1px）
      ）；
      內(nèi)聯(lián)尺寸：var（ - 可用空間）;

      ＆：不（.text-fit）{
        顯示：塊;
        字體大小：var（ - 字體大?。?

        @container（內(nèi)聯(lián)大小> 0）{
          白色空間：nowrap;
        }
      }

      / *使用光學(xué)尺寸的可變字體 */
      ＆.text-fit {
         - 捕獲長度2：var（ - 字體大?。?
        字體變化 - 插條：“ OPSZ” tan（atan2（var（-captured-Length2），1px））;
      }
    }
  }
}

@property-捕獲長度{
  文法:"<length> ”
  初始值：0px;
  繼承：正確；
}

@property-捕獲長度2 {
  文法:"<length> ”
  初始值：0px;
  繼承：正確；
}</length></length>

注意新的文本生長/文本障礙屬性

為了使擬合文本僅在一系列CSS中進(jìn)行容器，已經(jīng)討論了許多解決方案。偏愛的解決方案似乎是兩個新的文本生長和文本障礙屬性。就個人而言，我認(rèn)為我們不需要兩種不同的屬性。實(shí)際上，我更喜歡更簡單的替代方案，字體大?。簲M合寬度，但是由於文本生長和文本障礙已經(jīng)在桌子上（Chrome打算進(jìn)行原型，您可以跟蹤它），所以讓我們看看它們?nèi)绾喂ぷ鳌?/p>

您需要知道的第一件事是，正如建議的那樣，文本生長和文本障礙屬性可以應(yīng)用於容器中的多個包裝文本，這很大，因?yàn)槲覀儫o法使用我的JavaScript Technique或Roman的CSS技術(shù)（每條線需要擁有自己的容器）。

兩者都有相同的語法，如果您要同時又縮小和縮小，則需要同時使用：

文本生長：<fit-target><fit-method> ？<length> ？ ;
文字障礙：<fit-target><fit-method> ？<length> ？ ;</length></fit-method></fit-target></length></fit-method></fit-target>

• • 每條線：對於文本生長，文本線短於容器將生長以適合其。對於文本縮短，文本線的長度比容器縮小以適合其。
  • 一致：對於文本生長，最短的線將增長以適合容器，而所有其他線路都以相同的縮放係數(shù)生長。對於文本障礙，最長的線將縮小以適合容器，而所有其他線路則以相同的縮放係數(shù)收縮。
• （選修的）
  • 比例：縮放字形，而不是更改字體大小。
  • 比例內(nèi)線：縮放字形，而不是更改字體大小，而只是水平。
  • 字體大?。合鄳?yīng)地生長或縮小字體尺寸。 （我不知道默認(rèn)值是什麼，但我想是這樣。）
  • 信件間隔：字母間距將增長/收縮，而不是字體大小。
• （可選）：文本生長或最小字體大小的最大字體尺寸用於文本障礙。

同樣，我認(rèn)為我更喜歡字體大?。嘿N合寬度方法，因?yàn)檫@會增加並縮小所有線條以將容器僅在CSS線上擬合。上面的提案比我想要的要多，並且已經(jīng)有許多障礙要克服（其中許多與可訪問性有關(guān)）。不過，那就是我，我很想知道您的想法在評論中。

結(jié)論

與幾年前相比，使用CSS設(shè)置線長度要容易。現(xiàn)在，如果您也想將其扔進(jìn)去，我們可以使用字符單元，clamp（）和max（）（）（）和calc（），以及我們可以使用SVG和CSS來處理的古怪的事情，以將文本適合到容器中。它的確看起來像文本生長和文本障礙（或等效的解決方案），但至少在某些情況下，我們真正需要的是我們真正需要的。

在我們到達(dá)那里之前，這是一個很好的時機(jī)，您可以通過在Github問題中添加反饋，測試和用例來做到這一點(diǎn)。

以上是在CSS中設(shè)置線長度（並將文本擬合到容器中）的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！