麻将胡了1的对照说明在窄屏被截断,怎样保留完整版本名?
参照 W3C 的文本换行与重排规则,用中英文版本名和窄屏资料卡举例,区分自然换行、长串断行与信息截断。

直接回答
在窄屏资料卡里,中文标题可按正常规则换行,较长的版本名也应允许折行。遇到没有空格的长串,可以用支持断行的样式保留全部字符。测试时缩窄到三百二十 CSS 像素,确认两种名称、序号和来源仍能读全。
先列出不能被省略的字段
同一张资料卡可能放中文标题、英文名称、条目编号和引用链接。若看宽屏时都正常,手机上却只剩一行带省略号的标题,可以先判断哪些字段必须在窄屏看到。对照名称时尾端的数字与小标题往往用于区分两条记录,因此应在读者需要的位置保留全称。可以把中文名、英文名与编号放到不同可折行区域,再比较窄屏截图和页面文字。W3C 对重排的说明也以读者保留信息、无需来回横向移动阅读普通文本作为重要条件。
普通换行和为长串增加断点各管一部分
CSS 文本规范给出自然断行与溢出换行规则。普通换行优先用正常的分隔位置,例如英文名称中的单词间空格;一段实在比容器还宽且缺少断点的内容,则可在允许换行的条件下用 overflow-wrap 的 anywhere 值,让浏览器在必要处折行。应用时先把一般标题留给自然换行,只让较长编号或链接处理无断点的情形。这样读者不会因为页面变窄就少看到一截文字,也不会在大屏上无缘无故把每个词拆开。
对照同名条目时保留读者能复制的文本
一种便于检查的做法是准备两个有相同中文前缀但后缀不同的资料名称,同时给其中一条一个长编号。窄屏检查时,观察两条的尾部能否分别读到,并尝试复制到文本编辑器对照完整内容。换行是在视图中分段,名称或编号不需要插入临时字符改变原文。假如链接原本很长,也可以把正文链接文字改为清楚的资料标题,链接地址仍从原有字段读取。这样普通读者可按含义找来源,做版本核对的人也能辨认实际字段。
把三百二十 CSS 像素作为重排测试点
W3C 的重排准则把三百二十 CSS 像素列为纵向滚动文本的测试宽度。可在浏览器开发工具里设为这个视口宽度,再看名称、编号和参考资料区域是否读全,留意页面主体是否出现横向滚动。对于确实需要二维布局才能理解的内容,准则列有例外,但一块普通文字资料卡一般可以让各字段堆叠显示。最后扩大宽度再检查一次,确保恢复宽屏时两种语言仍对应原来的同一条记录。这里的测试针对阅读区呈现,与产品运行能力是不同的检查。