Пользовательское слово
Я работаю над легендой карты, и у меня возникают проблемы, когда слово слишком длинное. Я хочу знать, возможно ли добавить какое-либо свойство к тексту, чтобы оно разбивалось на последний пробел, счет, подчеркивание, косую черту и другие знаки препинания
Другими словами, я хочу, чтобы большее количество символов интерпретировалось как пробелы для "строки пробелов по умолчанию".
Я пытаюсь использовать word-wrap: break-word
или же word-break: break-all
но это не ожидаемый результат... Это то, что я хочу, только если нет символа, поэтому я, вероятно, добавлю 1 из них в CSS, чтобы разбить строки (кстати, я не уверен насчет различий / которые использовать / почему)
Вот пример того, что я хотел бы (и что я пытался)
редактировать
Кстати, я не использовал 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>
2 ответа
Я наконец-то воспользовался методом рассказать в комментариях к вопросу. Поскольку мой текст дополнен JavaScript, я просто добавляю  
после специальных символов, прежде чем добавить его на мою страницу.
str.replace(/([-/_])/g,"$& ")
Также я использовал CSS word-wrap:break-word;
сокращать слова слишком долго
Я обновил CSS в вашем примере. Посмотрите, если это то, что вы пытаетесь сделать.
http://jsfiddle.net/uazk54pL/1/
CSS выглядит так:
.tmp {
border:black 1px solid;
width:100px;
margin:5px;
position:relative;
word-wrap: break-word;
}