CSS实现span特殊换行需求：解决inline-block布局缺陷

要满足你提出的全部4个需求，可以给目标<span>元素设置以下CSS属性组合：

span.target {
  white-space: nowrap;
  overflow-wrap: anywhere;
}

各属性作用说明： #

• white-space: nowrap：强制<span>内的内容默认不换行，浏览器会优先选择在<span>前面的位置换行；如果<span>长度较短能容纳在当前行，就会和前后文本保持连贯，直接满足需求1和3。
• overflow-wrap: anywhere：当<span>整体宽度超出容器限制时，允许在<span>内部的单词间隙（或长单词内部）进行换行，并且不会让<span>占据整行宽度，后续文本会紧跟在<span>的最后一个字符之后，解决了inline-block方案的缺陷，满足需求2和4。

方案优势： #

不同于display: inline-block会将元素转化为块级内联容器（即使内部换行也会占据整行），这个组合基于<span>原本的inline特性，既保证了内容的换行优先级，又在需要时允许内部换行，同时保持了和前后文本的连贯性。

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