React-Native：限制卡片区域中Text组件的显示长度

嘿，这个需求太普遍了！不管你是用纯前端原生代码还是框架开发，都有对应的解决方案，我给你整理了几种最常用的方法，按需选择就行：

如果你的文本是静态的，不需要复杂的截断逻辑，用CSS就能快速搞定，分单行和多行两种场景：

单行截断 #

只需要给文本容器设置几个关键样式，就能自动在末尾显示省略号：

.card-text {
  width: 250px; /* 卡片的固定宽度，根据你的布局调整 */
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 用省略号代替超出的文本 */
}

多行截断 #

如果需要显示多行后再截断，用webkit内核的属性就能实现（大部分现代浏览器都支持）：

.card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 指定要显示的行数，比如3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

⚠️ 注意：这个方法对旧版IE兼容性不好，如果你的项目需要兼容老浏览器，建议用JS方法。

如果需要精确控制截断长度，或者要避免在单词中间截断（比如把“industry”切成“indus...”），可以写个自定义函数来处理：

基础版本（固定长度截断） #

function truncateText(text, maxLength) {
  // 如果原文本长度小于等于指定长度，直接返回原文本
  if (text.length <= maxLength) return text;
  // 截断到指定长度，去掉末尾空格后加省略号
  return text.slice(0, maxLength).trim() + '...';
}

// 使用示例（用你提供的原文本）
const originalText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to mak";
const truncated = truncateText(originalText, 30);
console.log(truncated); // 输出：Lorem Ipsum is simply dummy text...

优化版本（避免截断单词） #

这个版本会自动找到截断位置附近的最后一个空格，保证截断后不会拆分单词：

function truncateTextSmart(text, maxLength) {
  if (text.length <= maxLength) return text;
  // 多取一个字符，避免刚好卡在单词结尾
  const tempText = text.slice(0, maxLength + 1);
  // 找到最后一个空格的位置
  const lastSpaceIndex = tempText.lastIndexOf(' ');
  // 截断到最后一个空格的位置，加省略号
  return tempText.slice(0, lastSpaceIndex).trim() + '...';
}

如果你用Vue或React开发，可以结合框架的特性快速实现：

Vue 实现（计算属性） #

<template>
  <div class="card">{{ truncatedContent }}</div>
</template>

<script>
export default {
  props: ['originalText'],
  computed: {
    truncatedContent() {
      const maxLength = 30;
      if (!this.originalText) return '';
      if (this.originalText.length <= maxLength) return this.originalText;
      return this.originalText.slice(0, maxLength).trim() + '...';
    }
  }
}
</script>

React 实现（useMemo优化） #

import { useMemo } from 'react';

const Card = ({ text }) => {
  const maxLength = 30;
  // 用useMemo缓存结果，避免不必要的重渲染
  const truncatedText = useMemo(() => {
    if (!text) return '';
    if (text.length <= maxLength) return text;
    return text.slice(0, maxLength).trim() + '...';
  }, [text, maxLength]);

  return <div className="card">{truncatedText}</div>;
};

export default Card;

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