如何在 Tailwind 中实现文字溢出后自动省略号（“...”）

在前端开发中，我们经常需要在页面上显示大段的文字，有时为了不影响其他元素的排布，我们需要将文字限制在一个固定大小的盒子里。但是当文字过多时，就会出现文本溢出的现象，这时我们就需要将其显示成省略号。

在本文中，我们将介绍如何在 Tailwind 中通过 CSS 样式实现文字溢出后自动省略号。

实现思路

实现文字溢出自动省略号的常用 CSS 样式是：

// javascriptcn.com 代码示例
/* 单行文本溢出 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行文本溢出 */
.text-ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-ellipsis-multiline::after {
  content: "";
  display: inline-block;
  height: 1em;
  margin-right: -0.25em;
  vertical-align: bottom;
  width: 0.25em;
}

首先，我们需要将 CSS 样式配置到 Tailwind 的类中。然后，在 HTML 中使用这些类即可实现文字的自动省略号。

实现步骤

以下是实现文字溢出后自动省略号的具体步骤：

步骤 1：在 Tailwind 中定义样式

在 tailwind.config.js 文件中，定义以下 CSS 样式：

// javascriptcn.com 代码示例
module.exports = {
  theme: {},
  variants: {},
  plugins: [],
  extend: {
    typography: (theme) => ({
      DEFAULT: {
        css: {
          "h1,h2,h3,h4,h5,h6": {
            fontWeight: "bold",
          },
          ".text-ellipsis": {
            overflow: "hidden",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap",
          },
          ".text-ellipsis-multiline": {
            display: "-webkit-box",
            "-webkit-box-orient": "vertical",
            "-webkit-line-clamp": 2,
            overflow: "hidden",
            textOverflow: "ellipsis",
          },
          ".text-ellipsis-multiline::after": {
            content: '""',
            display: "inline-block",
            height: "1em",
            marginRight: "-0.25em",
            verticalAlign: "bottom",
            width: "0.25em",
          },
        },
      },
    }),
  },
};

步骤 2：在 HTML 中使用 Tailwind 类

在 HTML 中使用 .text-ellipsis 类即可实现单行文本溢出自动省略号：

<div class="w-60 h-6 truncate text-ellipsis">
  This is a long line of text that will be truncated and end in an ellipsis to save space.
</div>

在 HTML 中使用 .text-ellipsis-multiline 类即可实现多行文本溢出自动省略号：

<div class="w-60 h-10 text-ellipsis-multiline">
  This is a long line of text that will be truncated and end in an ellipsis to save space. This is a long line of text that will be truncated and end in an ellipsis to save space.
</div>

步骤 3：自定义样式

通过在 tailwind.config.js 文件中重写默认的 Tailwind 样式，我们可以自定义省略号的样式。以下是一个例子：

// javascriptcn.com 代码示例
module.exports = {
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            ".text-ellipsis::after": {
              content: '"……"',
              color: theme("colors.gray.500"),
            },
            ".text-ellipsis-multiline::after": {
              content: '""',
              display: "block",
              height: "1.25em",
              margin: "-1.25em 0 0",
              position: "relative",
              top: "-0.5em",
              width: "100%",
              background: "linear-gradient(to bottom, transparent, #fff 50%)",
            },
          },
        },
      }),
    },
  },
};

总结

通过将常用的 CSS 样式配置到 Tailwind 的类中，我们可以快速实现文字溢出自动省略号的效果。同时，在 tailwind.config.js 文件中重写默认的样式，我们还可以自定义省略号的样式，以适应不同的需求。

以上就是在 Tailwind 中实现文字溢出后自动省略号的完整步骤。希望本文能对大家有所指导。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6529251f7d4982a6ebbb124a