Question

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

换句话说，我希望更多的符号可以解释为＃34;默认空格breakline＆＃34;的空格。

我尝试使用word-wrap: break-word或word-break: break-all，但这不是预期的结果......只有在没有符号的情况下我才会想要这样，所以我可能会添加1这些对CSS打破线条（顺便说一句，我不确定差异/使用/为什么）

这是我想要的一个例子（以及我尝试过的）

http://jsfiddle.net/uazk54pL/

修改

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

＆＃13;

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

＆＃13;

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>

＆＃13;

Answer 1

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

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

此外，我使用CSS word-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;
}

自定义休息词

2 个答案: