我有一个要求，想要拆分以逗号或空格分隔的文本，并且不应该打断 div 中的任何单词。此 div 宽度也会根据设备发生变化。
是否可以用css来做
我正在使用代码。
<div class="large-9 medium-10 small-8 columns"><p id="3" style="margin-bottom: 0.5em;word-break: break-all; ">Common Situations : access,change,connect,configure,install</p></div>
此处设备的宽度表示为 large-9 medium-10 small-8
但我在 pc 中得到的相同文本如下
Common Situations : access,change,conn
ect,configure,install
如何在不将 div 的任何单词 w r 拆分为 large-9 medium-10 small-8 的不同宽度的情况下实现上述目标
最佳答案
(目前)没有纯 CSS 方法允许在逗号等特定字符后换行。您需要插入(非标准，但有效)<wbr>标记或特殊字符 U+200B ZERO WIDTH SPACE 每次出现后应允许在其后换行的字符。插入应该在生成 HTML 文档时处理，但如果需要，也可以在客户端 JavaScript 中完成:
<div><p id="3" style="margin-bottom: 0.5em; width: 12em">Common Situations : access,change,connect,configure,install</p></div>
<script>
var p = document.getElementById('3');
p.innerHTML = p.innerHTML.replace(/,/g, ',\u200b');
</script>我省略了类设置(可能与某些框架或库的使用有关)，因为它们与问题无关。我在元素上设置了任意宽度只是为了说明包装。
关于jquery - 如何拆分以逗号或空格分隔的文本，并且不应该打断任何单词，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27753780/