文本的换行与包裹之很懒不想更新的 overflow-wrap

最新推荐文章于 2024-12-12 14:50:11 发布

原创

最新推荐文章于 2024-12-12 14:50:11 发布 · 593 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

overflow-wrap

当一个不可分割的字符串太长要溢出其行盒子时, 这个属性设置是否允许在字符串中换行

📕原本这个属性是一个非标准的微软私有属性叫 word-wrap, 但是在 CSS3 中被重命名为 overflow-wrap. word-wrap 现在被当作 overflow-wrap 的别名了

属性值有三个

normal: 仅在正常的单词断点处中断, 比如连个单词之间空格
anywhere: 为了防止溢出, 可以在单词的任何位置断开, 并且不添加连字符.
break-word: 和 anywhere 相同, 但是在计算 min-content 时不考虑软换行机会, 而 anywhere 在计算 min-content 时考虑软换行.

.box {
   
   
  border: 3px solid salmon;
  width: min-content;
}
.box1 {
   
   
  overflow-wrap: break-word;
}
.box2 {
   
   
  overflow-wrap: anywhere;
}