移动端删除线怎么打？3个面试必问坑点全拆解

移动端删除线怎么打？3个面试必问坑点全拆解 面试被问“删除线怎么打”时，90%的人只会回答 text-decoration: line-through。 但这只是前端网页的标准答案。一旦面试官追问：“在原生 Android 或 iOS 里，或者混合开发框架中，这个属性失效了怎么办？性能如何？” 你大概率会卡壳。因为面试必问的不仅是语法，更是你对不同渲染引擎底层逻辑的理解，以及在真实业务场景中处理兼容性的能力。 很多转岗做移动端开发的同行，往往因为死磕网页 CSS，忽略了原生视图与 WebView 的差异，导致在项目上线后出现文字重叠、行高异常等诡异 Bug。 今天这篇保姆级教程，不聊虚的，直接结合 RFC 规范 中的文本渲染标准，从原理到代码，把“删除线怎么打”这件事讲透。不管你是用 React Native、Flutter，还是纯原生，看完都能秒懂。 概念速懂：为什么网页有效，原生却翻车 在深入代码之前，我们必须厘清一个核心误区：删除线（Strike-through）本质上不是一个字体属性，而是一个渲染指令。 在 Web 标准中，CSS 规范（参考 RFC 2119 及后续 HTML/CSS 工作组草案）定义了 line-through 作为 text-decoration 的一个值。浏览器引擎（如 Blink、WebKit）在绘制文本时，会根据字体度量（Font Metrics）计算出基线（Baseline）和平均字高（x-height），然后画一条横线穿过。 但在移动端原生开发中，情况完全不同：Android (TextView)：原生支持 setPaintFlags(Paint.STRIKE_THRU_TEXT_FLAG)。它是基于 Canvas 绘制的，效率极高，但自定义程度低。 iOS (UILabel)：原生支持 NSAttributedString.Key.strikethroughStyle。同样基于 Core Text 或 TextKit 渲染。 混合开发 (React Native/Flutter)：这是重灾区。React Native 的 Text 组件在不同版本对 lineThrough 支持不一致；Flutter 的 TextStyle 虽然支持 decoration: TextDecoration.lineThrough，但在多行文本或动态高度计算时，经常会出现删除线位置偏移。面试加分点：如果你能说出“删除线绘制依赖于字体度量的基线计算，不同渲染引擎对基线的定义存在细微差异，导致视觉错位”，面试官会立刻对你刮目相看。 环境准备：搭建一个可复现的测试场景 为了验证各种方案的兼容性，我们需要一个干净的环境。这里推荐两个方向： 方向一：Web 混合开发（H5 in App） 大多数移动应用内嵌 WebView 展示内容。我们需要模拟 iOS Safari 和 Android Chrome 的环境。工具：Chrome DevTools (模拟 Android Pixel) + Safari Developer Tools (模拟 iPhone)。 目标：测试 CSS 标准属性在移动端 WebView 中的表现。方向二：原生/跨平台框架Android: Android Studio 4.2+ iOS: Xcode 14+ Flutter: Flutter 3.x React Native: 0.70+注意：在测试前，请确保你的字体文件包含完整的 Unicode 字符集，特别是标点符号。很多“删除线断断续续”的 Bug，是因为字体缺失了连字符或特殊标点的字形数据，导致渲染引擎无法连续绘制线条。 核心语法：三种主流技术栈的实现差异 下面分别给出三种常见场景下的核心代码片段，并解析其背后的原理。 1. Web/CSS 标准实现（最通用） 这是最基础的写法，但在移动端要注意 line-height 的影响。 .strike-text {/* 核心属性 */text-decoration: line-through;/* 关键优化：防止行高过大导致删除线偏离文字中心 */line-height: 1.2; /* 可选：自定义删除线颜色，默认继承文字颜色 */text-decoration-color: #ff4d4f; }避坑提示：在 iOS Safari 中，如果 line-height 设置过大，删除线可能会穿过文字的上半部分而不是中间。建议配合 vertical-align: middle 或在父容器中使用 Flex 布局垂直居中。 2. Android 原生实现 Android 的 TextView 通过 Paint 对象控制绘制。 // 获取 TextView TextView textView = findViewById(R.id.my_text);// 方法一：直接设置 Paint Flag（推荐，性能好） textView.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);// 方法二：通过 SpannableString（适合部分文字加删除线） String originalText = 原价: 100元 现价: 50元; SpannableString ss = new SpannableString(originalText); // 假设 100元 是第 3-7 个字符 ss.setSpan(new StrikethroughSpan(), 3, 7, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); textView.setText(ss);面试考点：为什么 StrikethroughSpan 比全局设置更灵活？因为 Spannable 允许对文本的任意子区间应用不同的样式，这在电商商品列表（原价划线，现价加粗）中是高频场景。 3. Flutter 跨平台实现 Flutter 的 TextDecoration 非常强大，但需要注意 decorationTextAlign。 Text('Flutter 删除线示例',style: TextStyle(fontSize: 18,decoration: TextDecoration.lineThrough,decorationColor: Colors.red,// 关键：控制删除线对齐方式decorationTextAlign: TextDecorationUnderlinePosition.bottom,), )注意：Flutter 的 TextDecoration 在 Wrap 或 Flex 布局中，如果文本换行，删除线可能会断行。这是引擎层面的限制，目前官方尚未完美解决多行连续删除线的视觉一致性。 完整代码示例：一个跨端兼容的“删除线组件” 在实际项目中，我们很少直接写原生代码，而是封装一个组件。下面是一个基于 React Native 的实战案例，它解决了 iOS 和 Android 渲染不一致的问题。 痛点：React Native 在 iOS 上对 lineThrough 的支持早期版本有 Bug，且无法自定义删除线粗细。 对策：使用 TextDecorationLine 结合平台差异处理，或者降级为使用 border 模拟（不推荐，仅作为极端情况备选）。这里我们采用标准的 Text 属性，并加入平台判断逻辑。 import React from 'react'; import { View, Text, StyleSheet, Platform } from 'react-native';const StrikeThroughText = ({ text, style = {} }) = {// 核心逻辑：针对不同平台微调样式，确保视觉一致性const platformStyle = Platform.OS === 'ios' ? { textDecorationLine: 'line-through', textDecorationColor: '#ff4d4f' }: { textDecorationLine: 'line-through', textDecorationColor: '#ff4d4f' };return (View style={styles.container}Text style={[styles.baseText, platformStyle, style]}{text}/Text/View); };const styles = StyleSheet.create({container: {padding: 16,backgroundColor: '#fff',},baseText: {fontSize: 16,color: '#333',// 关键：设置 lineHeight 为 1.5 避免 iOS 上删除线贴顶lineHeight: 24,fontWeight: '500',}, });export default StrikeThroughText;逐行讲解：Platform.OS 判断：虽然 React Native 试图抹平差异，但 iOS 和 Android 的字体渲染引擎（Core Text vs Skia）对 line-through 的默认粗细和对齐位置仍有毫米级差异。显式声明颜色和对齐方式可以减少视觉偏差。 lineHeight: 24：这是解决“删除线跑偏”的关键。如果 lineHeight 等于 fontSize，在 iOS 上删除线往往偏上。增加行高可以给删除线留出垂直空间。 fontWeight: '500'：加粗文字会使删除线视觉重心下移，需配合行高调整。进阶场景：动态内容渲染 如果文本来自后端，包含 HTML 标签（如 s原价/s），你需要在渲染前进行解析。不要直接在 React Native 中渲染 HTML，推荐使用 react-native-html-to-element 或类似库，将其转换为 Text 组件树，并手动应用 lineThrough 样式。 常见报错与避坑指南 在实际项目中，我遇到过以下三个高频 Bug，直接给解决方案： 1. 删除线断开或出现空隙 现象：长文本换行后，第二行的删除线没有连接第一行，或者在标点符号处断开。 原因：字体缺失某些字符的字形数据，或者渲染引擎在换行时重新计算了基线。 对策：检查字体文件，确保包含完整的 Latin-1 Supplement 字符集。 如果是 Web 环境，尝试给 span 元素添加 display: inline-block，但这会影响布局，慎用。 最佳实践：在 CSS 中设置 word-break: break-all; 强制断行，避免在标点处断开。2. iOS 上删除线颜色不生效 现象：设置了 text-decoration-color，但在 iOS Safari 中无效，显示为黑色。 原因：iOS 旧版本 WebView 对 text-decoration-color 支持不佳。 对策：使用 -webkit-text-decoration-color 前缀。 如果仍无效，改用 color 属性控制文字颜色，接受删除线同色的限制。 终极方案：使用 SVG 或 Canvas 在文字上方绘制线条，但这会大幅增加性能开销，仅限关键页面使用。3. Flutter 中删除线与下划线重叠 现象：同时使用 TextDecoration.underline 和 TextDecoration.lineThrough，两条线重叠在一起，难以区分。 原因：默认情况下，两者都基于基线绘制，位置接近。 对策：使用 decorationTextAlign 属性。 将下划线对齐到 TextDecorationUnderlinePosition.bottom。 将删除线保持默认（中间）。 代码示例： TextStyle(decoration: TextDecoration.underline | TextDecoration.lineThrough,decorationTextAlign: TextDecorationUnderlinePosition.bottom, )小结 “删除线怎么打”看似是一个简单的 CSS 属性或 SDK 方法，实则考察的是开发者对渲染引擎差异、字体度量原理以及跨端一致性的理解。 在面试中，不要只背语法。要能说出：删除线是基于**基线（Baseline）**绘制的。 不同平台（Android/iOS/Web）的渲染引擎对基线定义不同，导致视觉差异。 解决方案包括：调整 line-height、使用平台判断、或降级为自定义绘制。这些细节，才是区分“调包侠”和“资深工程师”的关键。 你在项目里踩过这个坑吗？ 比如遇到过删除线在某些字体下断裂，或者在深色模式下颜色对比度不足的问题？评论区聊聊你的实战经验，咱们一起避坑。