在卡帕多奇亚给民宿做预订页，我把土耳其语长地名折成了三行

上个月接了个小活：给格雷梅一家六间房的民宿做一个能嵌进 Instagram 主页的预订表单。他们原来的页面在手机上打开，房型名「Deluxe Cave Suite with Valley View」会跟土耳其语地址挤在同一行，长地名一撑，整个卡片就横向滚动了。我拿到的样本是 6 个房型 × 3 种语言，页面要跑在游客那台旧安卓机的 Chrome 里，网络还是民宿前台那种时断时续的 Wi-Fi。

我的做法是先不碰样式，而是把地名和房型名从同一段文本里拆出来，让它们各自占一个可折行的块。关键不是 word-break: break-all，那会把土耳其语里的 ı 和 ş 切得很怪，我用的是 overflow-wrap: anywhere 加一个最小宽度兜底：

.booking-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  overflow-wrap: anywhere;
  min-width: 0;
}
.booking-card__meta > * {
  min-width: 0;
  max-width: 100%;
}

再配一段很短的 JS，在 resize 和字体加载完成后量一下卡片宽度，只给确实溢出的那个元素加 is-wrap 类，避免所有卡片都被迫折行、看起来碎。

为什么这样做：土耳其语地名里的 ı、ğ、ş 在旧字体回退时宽度会跳，纯 CSS 断词在 flex 子项上又常被 min-width: auto 顶回去。把测量交给 JS 只处理真正溢出的那几张卡，比全局断词稳，代价是多一次回流，我在低端机上测到首屏多花了约 40ms，能接受。

失效的地方：如果民宿后来把房型名改成一长串不帶空格的促销词，anywhere 会把词从中间切开，土耳其语读起来很别扭；另外前台 Wi-Fi 太差时字体回退不一致，第一次测量可能偏小，我最后是等 document.fonts.ready 之后再量一次才稳。还有一个坑：他们后台录入地址时混用了全角空格，折行位置完全不可预期，我干脆在渲染前做了 trim 和空格归一化。

你们在做多语言页面时，是优先保证不横向滚动，还是优先保证单词不被切开？我目前偏向前者，但遇到土耳其语长地名时总觉得这个取舍还没做完。