给卡帕多奇亚民宿做多语言页，我把土耳其语折行改成了按词断行

上周四晚上十一点，外包群里甩来一个小单：卡帕多奇亚一家民宿的官网要加英、土双语切换。我接的时候心想，不就是多一套 JSON 文案吗，两小时收工。结果救命，卡在土耳其语长地名上整整一晚上。

环境很朴素，Vite + React 18，页面里有一张卡片列表，每张卡显示「区域 + 民宿名 + 距离」。土语版的区域名一上来就把布局干碎了：Göreme Beldesi Aşağı Mahallesi 这种，word-break: break-word 直接把 Mahallesi 从中间劈开，Aşağı 的 ğ 还被截断成两行。数据量不大，就 14 条记录，但每一条都能复现。

我一开始图省事，给容器加 word-break: break-all，结果更惨，Kapadokya 变成 Kapadok/y/a。后来改成：

.card-locale {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  line-break: strict;
}

并且把土语 locale 单独设了 lang="tr"，让浏览器按土语规则找断点。真正救场的是把「区域」和「民宿名」拆成两个 DOM 节点，区域允许两行，民宿名用 text-overflow: ellipsis 兜底，不参与折行竞争。代价是卡片高度会浮动，我把列表改成 grid-auto-rows: minmax(96px, auto)，高度不齐的观感自己忍了。

为什么这么写：break-all 不认词边界，只认字符；土语里 ğ、ş、ı 这些字符在小字号下本来就容易糊，再被切开就彻底读不出来。overflow-wrap: break-word 只在整词放不下时才断，配合 lang 属性，浏览器知道这是土语，优先在空格处换。这事的取舍是：断词规则交给浏览器，我少写逻辑，但不同浏览器断点不完全一致，视觉上没法像素级对齐。

哪里会失效：如果民宿名本身超过容器宽度（有一个叫 Kaya Panorama Suites 的，英文也撑），ellipsis 会吃掉后半段，得靠 title 属性补全；另外 hyphens: auto 在部分安卓 WebView 上不生效，别指望它。我自己踩的坑是给 html 写了 lang="en" 又忘了改，土语页断行照样乱，排查了四十分钟才发现是根节点语言标记的问题。

现在这条卡片在土语下能正常两行显示了，但我还没想清楚：如果区域名真的长到三行，是让它继续长，还是强制单行加省略号？你们做多语言页面时，长地名是让布局迁就文字，还是文字迁就布局？