React-Fluent UI：如何实现卡片文本截断并显示省略号

当然可行，以下是两种常用的实现方式，适配不同的文本行数需求：

单行文本截断 #

通过CSS属性组合即可实现，核心是限制文本不换行、隐藏超出内容并显示省略号：

.card-content {
  /* 先给文本容器设置固定宽度或最大宽度 */
  max-width: 280px;
  white-space: nowrap; /* 强制文本单行显示 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

将上述样式应用到卡片内的文本容器上即可生效，注意要确保容器有明确的宽度限制，否则text-overflow不会触发。

多行文本截断 #

如果需要支持多行后再截断，可以使用WebKit内核的属性组合，现代浏览器（Chrome、Firefox、Safari等）均兼容：

.card-content {
  max-width: 280px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 指定显示的最大行数 */
  -webkit-box-orient: vertical;
}

-webkit-line-clamp用来设置允许显示的行数，超出部分会自动截断并显示省略号。

React组件中的适配（针对你的TSX场景） #

如果是在React组件中使用，只需将样式绑定到文本元素即可，比如使用CSS Modules或styled-components：

// 使用styled-components的示例
import styled from 'styled-components';

const CardContent = styled.div`
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

// 组件内使用
const Card = () => {
  return (
    <div className="card">
      <CardContent>这里是过长的卡片文本内容，测试截断效果...</CardContent>
    </div>
  );
};

注意事项：

• 确保文本容器的父元素不会破坏溢出隐藏的逻辑，比如避免给父元素设置overflow: visible以外的属性（除非是刻意布局需求）。
• 如果文本中包含强制换行标签（如<br/>），单行文本截断的方法会失效，需确保文本是连续的纯文本或未强制换行的内容。

内容的提问来源于stack exchange，提问作者user3587624