如何防止网页中yyyy-mm-dd格式日期字符串在连字符处异常换行

overflow-wrap、word-break属性不生效的核心逻辑：浏览器默认将ASCII短横线-判定为合法软换行断点，容器宽度不足时会优先在短横线位置折行，这两个属性本身不覆盖连字符的默认换行规则，所以单独加这两个属性解决不了问题。

方案1：纯CSS实现（优先推荐，无需修改原始日期内容） #

给承载日期列表的div元素添加如下CSS属性即可：

.date-list {
  hyphens: none;
  word-break: keep-all;
}

核心生效属性是hyphens: none，专门用来禁用浏览器默认的连字符位置自动换行规则；word-break: keep-all用来保证连续的日期字符串不会从数字中间被拆分。
如果需要适配IE这类极老旧浏览器，可以追加一行line-break: strict;强化换行规则约束。

注意：除非你需要整行日期单行展示加省略号，否则不要加white-space: nowrap，该属性会完全禁用所有折行，导致内容超出容器宽度出现横向滚动条。

方案2：字符替换实现（兼容性拉满，适配所有浏览器版本） #

如果CSS方案在你的目标浏览器上存在兼容问题，可以将所有日期字符串中的普通短横线-替换为非断字连字符‑（Unicode编码：U+2011）。
不用担心里边的短横线显示异常，这个字符渲染出来和普通半角短横线完全一致，肉眼看不出区别，但浏览器不会将其识别为可换行断点，能保证每个YYYY-MM-DD格式的日期永远作为整体折行，只会在两个日期之间的空格位置换行，不会出现单条日期从短横线处被拆成两段的问题。

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