Safari下Textbox内容溢出屏幕 Chrome显示正常该如何解决

问题复现 #

同设备同分辨率下双浏览器运行效果对比：

问题相关代码参考：

解决方案 #

Safari（Webkit内核）对文本换行属性的渲染逻辑和Chrome（Blink内核）存在差异，仅配置word-wrap: break-word无法触发自动换行，按以下步骤调整即可解决文本溢出问题：

• 确认文本框标签类型
  单行<input type="text">原生不支持多行自动换行，Safari下会强制单行展示内容直接溢出，若需要换行能力必须替换为<textarea>标签，或使用contenteditable="true"的普通块级元素模拟文本框。
• 给文本框元素追加全兼容换行CSS配置，不要只写单个换行属性：

/* 替换为文本框实际使用的类名 */
.textbox {
  /* 基础盒模型配置，避免padding/border把元素撑出容器 */
  width: 100%; /* 替换为业务需要的固定宽度值 */
  max-width: 100%;
  box-sizing: border-box;
  /* 全兼容换行属性集，覆盖Webkit内核特殊逻辑 */
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere; /* Safari下触发换行的核心属性，优先级高于旧版word-wrap */
  -webkit-line-break: after-white-space; /* Webkit内核专属换行规则适配 */
  /* 兜底配置，极端长串无分隔内容时隐藏溢出 */
  overflow: hidden;
}

• 排查冲突属性
  检查是否存在以下覆盖换行逻辑的属性，存在则删除：
  • white-space: nowrap：强制所有文本不换行
  • 固定宽度场景下未设置box-sizing: border-box，内边距+边框把元素实际宽度撑大超出容器
  • 父元素设置了display: flex且未给文本框元素加flex-shrink: 1和min-width: 0，导致元素被内容撑开宽度

内容的提问来源于stack exchange，提问作者Syed Umair