在卡帕多奇亚青旅做的前端清单页，被一条土耳其语长地名撑裂了

卡帕多奇亚的青旅老板让我帮忙改一个本地体验清单页，跑在 Chrome 120 和 Safari 16 上，数据是 120 条体验项，每条有土耳其语标题、时长、集合点。现象很具体：在 iPhone SE 宽度下，一条集合点叫「Göreme Belediyesi Karşısı, Aydınlı Mah. No:7」的长地名把整个卡片撑到横向滚动，标题挤成两行，按钮直接滑出视口。

我的做法是先给容器加 overflow-wrap: break-word 和 hyphens: auto，但土耳其语里「Karşısı」这种后缀和逗号组合不买账。后来改成在渲染前先按 Intl.Segmenter 做一次软断点插入：

const seg = new Intl.Segmenter('tr', { granularity: 'word' });
const parts = [...seg.segment(text)].map(s => s.segment);
const safe = parts.reduce((acc, w, i) => {
  const next = acc + w;
  return (next.length > 24 && i > 0) ? acc + '\u200B' + w : next;
}, '');

CSS 里再配 overflow-wrap: anywhere 兜底。这样窄屏下卡片高度会变，但横向滚动没了。

为什么不在后端截断？因为这条清单是给住客在青旅前台扫码看的，集合点必须完整可见，截断等于让人找不到集合位置。代价是卡片高度不齐，列表滚动变长，我加了 line-clamp: 3 只对标题做省略，地址保持全量。

会失效的地方：Intl.Segmenter 在 Safari 16 以下没有，我测的旧 iPad 上直接报错，最后用正则 /\s+/ 兜底，断点会糙一点；另外土耳其语里「ı」和「i」的大小写转换在 toLocaleLowerCase('tr') 之外会出问题，我一开始忘了加 locale，搜索匹配全挂。还有一次地址里混了阿拉伯语字符，anywhere 把单个字母拆到下一行，视觉上更糟，最后给这类字段单独加了 dir="auto"。

你们在窄屏上处理土耳其语长地名时，是优先保完整还是优先保卡片高度一致？