Bento

Bento Fit Text

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>bento-fit-text</title>
    <script src="https://cdn.ampproject.org/bento.js"></script>
    <script
      async
      src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"
    />
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
          'Segoe UI Symbol';
        margin: 2rem;
        background: #ecf1f3;
      }
      bento-fit-text {
        height: calc(100vh - 120px);
        margin: 1rem 0;
      }
      button {
        border: none;
        padding: 1rem 2rem;
        border-radius: 8px;
        color: #269da3;
        background: white;
        font-size: 18px;
        font-weight: bold;
        margin-right: 1rem;
      }
    </style>
</head>

<body>

    <bento-fit-text id="my-fit-text" max-font-size="1000">
      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
      inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire
      et, vim at aeque inermis reprehendunt.
    </bento-fit-text>
    <div class="buttons" style="margin-top: 8px">
      <button id="font-button">Change max-font-size</button>
      <button id="content-button">Change content</button>
    </div>
    <script>
      (async () => {
        const fitText = document.querySelector('#my-fit-text');
        await customElements.whenDefined('bento-fit-text');
        // set up button actions
        document.querySelector('#font-button').onclick = () =>
          fitText.setAttribute('max-font-size', '16');
        document.querySelector('#content-button').onclick = () =>
          (fitText.textContent = 'new content');
      })();
    </script>
</body>

确定最适合将所有给定文本内容放入可用空间的最佳字体大小。

Bento Fit Text 的预期内容是文本或其他内联内容，但它也可以包含非内联内容。

将 bento-fit-text 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React / Preact

Web 组件

您必须包含每个 Bento 组件所需的 CSS 库，以保证正确加载，然后再添加自定义样式。或者使用内联提供的轻量级预升级样式。请参阅 布局和样式。

通过 npm 导入

npm install @bentoproject/fit-text
import {defineElement as defineBentoFitText} from '@bentoproject/fit-text';
defineBentoFitText();

通过 <script> 包含

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css" crossorigin="anonymous">

示例

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"
    />
</head>

<body>

<bento-fit-text id="my-fit-text">
      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
      inermis reprehendunt.
    </bento-fit-text>
</body>

溢出内容

即使指定了 min-font-size，如果 bento-fit-text 的内容溢出了可用空间，溢出的内容也会被切断并隐藏。基于 WebKit 和 Blink 的浏览器会为溢出的内容显示省略号。

在以下示例中，我们指定了 min-font-size 为 40，并在 bento-fit-text 元素中添加了更多内容。这会导致内容超出其固定块父级的大小，因此文本被截断以适应容器。

<div style="width: 300px; height: 300px; background: #005af0; color: #fff">
  <bento-fit-text min-font-size="40">
    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire
    et, vim at aeque inermis reprehendunt
  </bento-fit-text>
</div>

布局和样式

每个 Bento 组件都有一个小型 CSS 库，您必须包含它以保证正确加载，而不会出现 内容偏移。由于基于顺序的特异性，您必须手动确保在任何自定义样式之前包含样式表。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"
/>

或者，您还可以使轻量级预升级样式内联可用

<style>
  bento-fit-text {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

容器类型

bento-fit-text 组件具有已定义的布局大小类型。为确保组件正确渲染，请务必通过所需的 CSS 布局（例如使用 height、width、aspect-ratio 或其他此类属性定义的布局）将大小应用于组件及其直接子级（幻灯片）。

bento-fit-text {
  height: 100px;
  width: 100%;
}

溢出内容的可访问性考虑因素

虽然溢出内容在视觉上被截断以适应容器，但请注意它仍然存在于文档中。不要依赖溢出行为来简单地“填充”页面中的大量内容 - 虽然在视觉上可能看起来合适，但它可能会导致页面对辅助技术（例如屏幕阅读器）的用户变得过于冗长，因为对于这些用户，所有截断的内容仍将被完整地读取/播报。

属性

媒体查询

<bento-fit-text> 的属性可以配置为根据 媒体查询 使用不同的选项。

min-font-size

以整数形式指定 bento-fit-text 可使用的最小字体大小（像素）。

max-font-size

以整数形式指定 bento-fit-text 可使用的最大字体大小（像素）。

API 示例

以编程方式更改属性值将自动更新元素。

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"
    />
</head>

<body>

<bento-fit-text id="my-fit-text">
      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
      inermis reprehendunt.
    </bento-fit-text>
    <div class="buttons" style="margin-top: 8px">
      <button id="font-button">Change max-font-size</button>
      <button id="content-button">Change content</button>
    </div>

    <script>
      (async () => {
        const fitText = document.querySelector('#my-fit-text');
        await customElements.whenDefined('bento-fit-text');

        // set up button actions
        document.querySelector('#font-button').onclick = () =>
          fitText.setAttribute('max-font-size', '40');
        document.querySelector('#content-button').onclick = () =>
          (fitText.textContent = 'new content');
      })();
    </script>
</body>

Preact/React 组件

通过 npm 导入

npm install @bentoproject/fit-text
import React from 'react';
import {BentoFitText} from '@bentoproject/fit-text/react';
import '@bentoproject/fit-text/styles.css';

function App() {
  return (
    <BentoFitText>
      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
      inermis reprehendunt.
    </BentoFitText>
  );
}

布局和样式

容器类型

BentoFitText 组件具有已定义的布局大小类型。为确保组件正确渲染，请务必通过所需的 CSS 布局（例如使用 height、width、aspect-ratio 或其他此类属性定义的布局）将大小应用于组件及其直接子级（幻灯片）。这些可以内联应用

<BentoFitText style={{width: 300, height: 100}}>
  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis
  reprehendunt.
</BentoFitText>

或通过 className

<BentoFitText className="custom-styles">
  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis
  reprehendunt.
</BentoFitText>
.custom-styles {
  height: 100px;
  width: 100%;
}

道具

minFontSize

以整数形式指定 bento-fit-text 可使用的最小字体大小（像素）。

maxFontSize

以整数形式指定 bento-fit-text 可使用的最大字体大小（像素）。

我们在本网站上提供 Cookie，以分析流量并优化您的体验。
更多详情