FigmaToCode项目中文本预览截断问题的分析与解决

FigmaToCode项目中文本预览截断问题的分析与解决

【免费下载链接】FigmaToCode Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI. 项目地址: https://gitcode.com/gh_mirrors/fi/FigmaToCode

问题背景

在Figma设计转代码的开发过程中，文本预览截断是一个常见但容易被忽视的问题。当设计师在Figma中设置了文本自动调整（Text Auto Resize）为"TRUNCATE"模式时，期望文本在超出容器边界时显示省略号（Ellipsis），但在生成的代码中这一行为往往无法正确实现。

问题分析

Figma文本截断机制

Figma提供了三种文本自动调整模式：

在Figma的API类型定义中，文本截断相关的属性如下：

export type TypeStyle = {
  // ... 其他属性
  textTruncate?: boolean;          // 是否启用文本截断
  maxLines?: number;               // 最大行数限制
  textAutoResize: "NONE" | "WIDTH_AND_HEIGHT" | "HEIGHT" | "TRUNCATE";
};

代码生成中的问题

通过分析FigmaToCode项目的源代码，发现文本截断处理存在以下问题：

1. HTML生成器中的不完整实现
2. 缺乏跨框架的统一处理
3. 省略号样式缺失

解决方案

1. 完善HTML生成器

在packages/backend/src/html/htmlDefaultBuilder.ts中，需要增强文本截断的处理：

size(): this {
  const { node, settings } = this;
  const { width, height, constraints } = htmlSizePartial(
    node,
    settings.htmlGenerationMode === "jsx"
  );

  if (node.type === "TEXT") {
    switch (node.textAutoResize) {
      case "WIDTH_AND_HEIGHT":
        break;
      case "HEIGHT":
        this.addStyles(width);
        break;
      case "NONE":
      case "TRUNCATE":
        this.addStyles(width, height);
        // 添加文本截断样式
        if (node.textAutoResize === "TRUNCATE") {
          this.addTextTruncationStyles();
        }
        break;
    }
  } else {
    this.addStyles(width, height);
  }

  return this;
}

private addTextTruncationStyles(): this {
  this.addStyles(
    formatWithJSX("overflow", this.isJSX, "hidden"),
    formatWithJSX("text-overflow", this.isJSX, "ellipsis"),
    formatWithJSX("white-space", this.isJSX, "nowrap")
  );
  
  // 处理多行文本截断
  if ((node as any).maxLines && (node as any).maxLines > 1) {
    this.addMultiLineTruncationStyles((node as any).maxLines);
  }
  
  return this;
}

2. 跨框架统一处理

需要为不同的目标框架提供相应的文本截断实现：

框架	单行截断方案	多行截断方案
HTML/CSS	text-overflow: ellipsis	-webkit-line-clamp
Tailwind	truncate	line-clamp-{n}
Flutter	TextOverflow.ellipsis	maxLines + overflow
SwiftUI	.lineLimit(1) + .truncationMode(.tail)	.lineLimit(n)

3. 实现多行文本截断

对于多行文本截断，需要特殊的CSS处理：

/* 多行文本截断通用方案 */
.multi-line-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 控制显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

具体实现步骤

步骤1：检测文本截断属性

// 在转换过程中检测文本截断设置
function shouldApplyTextTruncation(node: TextNode): boolean {
  return node.textAutoResize === "TRUNCATE" || 
         (node as any).textTruncate === true;
}

function getMaxLines(node: TextNode): number {
  return (node as any).maxLines || 1;
}

步骤2：框架特定的实现

// HTML生成器
export class HtmlTextTruncation {
  static applyTruncation(node: TextNode, builder: HtmlDefaultBuilder): void {
    const maxLines = getMaxLines(node);
    
    if (maxLines === 1) {
      builder.addStyles(
        formatWithJSX("overflow", builder.isJSX, "hidden"),
        formatWithJSX("text-overflow", builder.isJSX, "ellipsis"),
        formatWithJSX("white-space", builder.isJSX, "nowrap")
      );
    } else {
      builder.addStyles(
        formatWithJSX("display", builder.isJSX, "-webkit-box"),
        formatWithJSX("-webkit-line-clamp", builder.isJSX, maxLines.toString()),
        formatWithJSX("-webkit-box-orient", builder.isJSX, "vertical"),
        formatWithJSX("overflow", builder.isJSX, "hidden"),
        formatWithJSX("text-overflow", builder.isJSX, "ellipsis")
      );
    }
  }
}

// Tailwind生成器
export class TailwindTextTruncation {
  static applyTruncation(node: TextNode, builder: any): void {
    const maxLines = getMaxLines(node);
    
    if (maxLines === 1) {
      builder.addClass("truncate");
    } else {
      builder.addClass(`line-clamp-${maxLines}`);
    }
  }
}

步骤3：集成到主流程中

// 在主要的代码生成流程中集成文本截断处理
function generateCodeForNode(node: SceneNode, settings: any): string {
  // ... 其他处理逻辑
  
  if (node.type === "TEXT" && shouldApplyTextTruncation(node)) {
    switch (settings.framework) {
      case "html":
        HtmlTextTruncation.applyTruncation(node, htmlBuilder);
        break;
      case "tailwind":
        TailwindTextTruncation.applyTruncation(node, tailwindBuilder);
        break;
      case "flutter":
        FlutterTextTruncation.applyTruncation(node, flutterBuilder);
        break;
      case "swiftui":
        SwiftUITextTruncation.applyTruncation(node, swiftUIBuilder);
        break;
    }
  }
  
  // ... 继续其他处理
}

测试验证

测试用例设计

// 测试文本截断功能
describe("Text Truncation", () => {
  test("should apply single line truncation for TRUNCATE mode", () => {
    const textNode = createMockTextNode({
      textAutoResize: "TRUNCATE",
      characters: "这是一个很长的文本内容将会被截断显示"
    });
    
    const result = generateCode(textNode, { framework: "html" });
    
    expect(result).toContain("text-overflow: ellipsis");
    expect(result).toContain("white-space: nowrap");
    expect(result).toContain("overflow: hidden");
  });

  test("should apply multi-line truncation with maxLines", () => {
    const textNode = createMockTextNode({
      textAutoResize: "TRUNCATE",
      maxLines: 3,
      characters: "这是一个多行文本内容，将会在第三行显示省略号"
    });
    
    const result = generateCode(textNode, { framework: "html" });
    
    expect(result).toContain("-webkit-line-clamp: 3");
    expect(result).toContain("-webkit-box-orient: vertical");
  });
});

预期输出对比

场景	输入	期望输出
单行截断	textAutoResize: "TRUNCATE"	text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
多行截断	textAutoResize: "TRUNCATE", maxLines: 3	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
Tailwind单行	textAutoResize: "TRUNCATE"	class="truncate"
Tailwind多行	textAutoResize: "TRUNCATE", maxLines: 2	class="line-clamp-2"

兼容性考虑

浏览器兼容性

对于不支持多行截断的浏览器，需要提供后备方案：

// 检测浏览器支持情况并提供后备
function applyTextTruncationFallback(element, maxLines) {
  if (!CSS.supports('-webkit-line-clamp', maxLines)) {
    // 使用JavaScript实现的多行截断
    truncateTextWithJS(element, maxLines);
  }
}

总结

文本预览截断问题是FigmaToCode项目中的一个重要功能缺口。通过系统性的分析和实现，我们能够：

1. 准确识别Figma中的文本截断设置
2. 跨框架统一处理不同目标平台的文本截断需求
3. 完整支持单行和多行文本截断场景
4. 确保兼容性提供适当的后备方案

这种解决方案不仅提升了代码生成的质量，也确保了设计意图在各种平台上都能得到准确实现，为开发者提供了更好的开发体验。

【免费下载链接】FigmaToCode Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI. 项目地址: https://gitcode.com/gh_mirrors/fi/FigmaToCode