塔斯娱乐资讯网

文字截断用省略号还是换行判断方法来了✂️

文字太长放不下怎么办?这个问题困扰了无数设计师和开发
其实有一套清晰的判断逻辑👇
📌 场景一:列表/卡片中的标题 → 省略号截断
用户在列表中是快速扫视模式,标题只需要提供"够判断要不要点进去"的信息。超出部分用 ... 截断,点进详情页再看完整内容
建议:标题最多显示 1-2 行
📌 场景二:详情页的描述 → 展开/收起
内容重要但太长,用"展开全部"按钮。用户自主决定要不要看完。这比直接截断好,因为用户不用跳转新页面
📌 场景三:标签/按钮 → 尽量不截断
如果标签文字放不下,说明你的设计该调整了。缩小字号、换个更短的文案、或加大容器宽度
📌 场景四:表格中的长文本 → hover 展示完整内容
PC 端表格内容截断后,鼠标悬停显示完整信息(tooltip)。移动端可以用点击展开
❌ 绝对不能截断的内容:
金额数字
用户名(至少显示完整)
操作按钮的文案
错误提示信息
⚠️ 设计稿里一定要标注截断规则!不然开发会按自己的理解来,上线后样式各种崩
这个知识点看起来小,但实际工作中出现频率极高💡