javascript - 自定义断词

Question

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

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

我尝试使用word-wrap: break-wordorword-break: break-all但这不是预期的结果......只有在没有符号的情况下我才想要它，所以我可能会在 CSS 中添加 1 个来换行（顺便说一下，我不确定差异/使用哪个/为什么）

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

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

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

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

我也用 CSSword-wrap:break-word;把单词剪得太长了

Answer 2

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

http://jsfiddle.net/uazk54pL/1/

CSS 看起来像这样：

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