自定义断词

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>

- Luckyn

---

你可以在单词中使用­来添加软连字符。这对你有帮助吗？ - Samuli Hakoniemi

我使用的单词是从数据库导入的，所以很遗憾，我可能无法在需要的地方添加标记。 - Luckyn

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Jakehao

我不想将其分解为真实单词，我的想法是将其分解为N个字符，就像word-break: break-all属性一样（请参见预期框）。另外，正如我在最后一次编辑中所说，我不反对添加JavaScript :) - Luckyn

你可以使用 代替­。https://dev59.com/0m445IYBdhLWcg3wGWd7 - planky

Answer 1

我最终采用了问题评论中提到的方法。由于我的文本是通过JavaScript添加的，因此在将其添加到页面之前，在特殊字符后添加 。

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

我还使用了 CSS 属性 word-wrap:break-word; 来截断过长的单词。

- Luckyn

Answer 2

我已经更新了你的示例中的CSS。看一下，如果这就是你想做的。

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

CSS代码如下：

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

- M.K

---

你可以从他的底部代码块看出，他想要实现什么……你没有改变任何东西。 - Aaron

我已经尝试添加了word-wrap: break-word属性...（见框2） - Luckyn