Пользовательское слово

Question

Я работаю над легендой карты, и у меня возникают проблемы, когда слово слишком длинное. Я хочу знать, возможно ли добавить какое-либо свойство к тексту, чтобы оно разбивалось на последний пробел, счет, подчеркивание, косую черту и другие знаки препинания

Другими словами, я хочу, чтобы большее количество символов интерпретировалось как пробелы для "строки пробелов по умолчанию".

Я пытаюсь использовать 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

Я наконец-то воспользовался методом рассказать в комментариях к вопросу. Поскольку мой текст дополнен JavaScript, я просто добавляю   после специальных символов, прежде чем добавить его на мою страницу.

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

Также я использовал 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;
}