自定义休息词

Question

我正在制作地图传奇,当这个词太长时我会遇到麻烦.我想知道是否可以在文本中添加一些属性,以便它突破到最后一个符号空间,得分,下划线,斜杠和其他标点符号

换句话说,我希望更多的符号可以解释为"默认空格分隔线"的空格.

我尝试使用word-wrap: break-word或word-break: break-all但它不是预期的结果......这是我想要的只有没有符号所以我可能会将其中的一个添加到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

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

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

我还使用 CSSword-wrap:break-word;来剪掉太长的单词