javascript - 自定义中断词

Question

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

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

我尝试使用 word-wrap: break-word 或 word-break: break-all 但这不是预期的结果...这正是我想要的如果没有符号，那么我可能会将其中的 1 个添加到 CSS 中以换行(顺便说一句，我不确定差异/使用哪个/为什么)

这是我想要的(以及我尝试过的)示例

http://jsfiddle.net/uazk54pL/

编辑

顺便说一下，我没有使用 JavaScript，因为我认为它可以与 css 一起使用，而且我不太确定该怎么做...但如果找不到更好的解决方案，我不反对使用它

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

nothing
<div id="nothing" class="tmp">
  hi im/a-longword
  <br/>
  <br/>breaklineon-and_and and/
  <br/>
  <br/>ifnosymboliwantwordbreak
</div>
word-wrap: break-word;
<div id="wrap" class="tmp">
  hi im/a-longword
  <br/>
  <br/>breaklineon-and_and and/
  <br/>
  <br/>ifnosymboliwantwordbreak
</div>
word-break: break-all;
<div id="break" class="tmp">
  hi im/a-longword
  <br/>
  <br/>breaklineon-and_and and/
  <br/>
  <br/>ifnosymboliwantwordbreak
</div>
expected
<div id="expected" class="tmp">
  hi im/a-
  <br/>longword
  <br/>
  <br/>breaklineon-
  <br/>and_and and/
  <br/>
  <br/>ifnosymboli
  <br/>wantwordbr
  <br/>eak
</div>

Answer 1

我终于在问题的评论中使用了方法告诉。由于我的文本是用 JavaScript 添加的，所以我只是在特殊字符之后添加  ，然后再将其添加到我的页面。

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

我还使用了 CSS word-wrap:break-word; 来剪切太长的单词