Javascript 自定义中断字

我正在制作一个地图图例，当单词太长时，我遇到了一些麻烦。 我想知道是否有可能在文本中添加一些属性，使其中断到最后一个符号空格、分数、下划线、斜杠和其他标点符号

换句话说，我希望更多的符号被解释为“默认空格特征线”的空格

我尝试使用

wordwrap:break-word

或

word-break:break-all

，但这不是预期的结果。。。这就是我想要的，如果没有符号，那么我可能会在CSS中添加一个符号来断线（顺便说一句，我不确定区别/使用哪个/为什么）

下面是我想要的（以及我尝试过的）示例

编辑

顺便说一句，我没有使用JavaScript，因为我认为它可以与css一起使用，但我真的不知道如何使用它。。。但如果找不到更好的解决方案，我并不反对使用它

.tmp{
边框：黑色1px实心；
宽度：100px；
保证金：5px；
}
#包裹{
单词包装：打断单词；
}
#中断{
单词break：打破一切；
}
}

什么都没有
嗨，我是/a-longword



breaklineon-and_和/



ifnosymboliwantwordbreak
单词包装：打断单词；
嗨，我是/a-longword



breaklineon-and_和/



ifnosymboliwantwordbreak
单词break：打破一切；
嗨，我是/a-longword



breaklineon-and_和/



ifnosymboliwantwordbreak
预期
你好，im/a-

长词



breaklineon-

和/



ifnosymboli

wantwordbr

eak

我已经在您的示例中更新了css。看看，如果这是你想要做的

CSS如下所示：

.tmp {
    border:black 1px solid;
    width:100px;
    margin:5px;
    position:relative;
    word-wrap: break-word;
}

---

我最后在问题的评论中使用了tell方法。因为我的文本是用JavaScript添加的，所以我只是添加

&thinsp在特殊字符之后，然后再将其添加到我的页面

str.replace(/([-/_])/g,"$& ")

我还使用了CSS
wordwrap:break-word
要将单词剪得太长
可以使用
在单词上添加软连字符标记­。这有帮助吗？我正在使用的单词是从数据库导入的，所以不幸的是，我认为我无法在需要的地方添加标记。事实上，我认为问题在于如何将“ifnosymboliwantwordbreak”分解为单词，我怀疑css能做到这一点。我不想将其分解为真正的单词，我所想的是像单词断裂一样打破n个字符：打破所有的属性（参见预期框），正如我在最后一次编辑中所说的，我不反对添加JavaScript：）我不知道通过CSS告诉浏览器什么样的字符应该被认为是打破一个单词的有效点。但是，如果你自己定义了一个字符列表，那么你可以在从数据库中读取单词后，自己（通过脚本）在这些地方添加软连字符。你可以从他的底部块看到他试图实现的目标。。。您没有更改任何内容。我已经尝试添加word wrap:break word属性。。。（见方框2）