自定义中断词

Question

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

换句话说，我希望更多的符号像 space 一样被解释为 "default spaces breakline"。

我尝试使用 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

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

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

CSS 看起来像这样：

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

Answer 2

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

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

另外我用CSSword-wrap:break-word;把字剪得太长了

自定义中断词

Custom break word

html

javascript

css

word-wrap

word-break