Własne słowo przerwy

Question

Pracuję nad legendą mapy i mam problem, gdy słowo jest za długie. Chcę się dowiedzieć, czy istnieje możliwość dodania do tekstu pewnej właściwości, aby podzielić się na ostatnią przestrzeń symbolu, wynik, podkreślenie, ukośnik i inną interpunkcja. Innymi słowy, chcę, aby więcej symboli interpretować jak spacje. dla "domyślnej linii podziału przestrzeni".

Próbuję użyć word-wrap: break-word lub word-break: break-all, ale to nie jest oczekiwany wynik ... To jest to, czego chcę, tylko jeśli nie ma symbolu, więc prawdopodobnie dodaję 1 z nich do CSS, aby przerwać linie (przy okazji nie jestem pewien co do jednego różnice/Wich do zastosowania/dlaczego)

Oto przykład tego, co chciałbym (i co starałem)

http://jsfiddle.net/uazk54pL/

edycji

przy okazji, nie używałem JavaScript, ponieważ myślałem, że może być z css, i nie jestem naprawdę pewien jak to zrobić ... ale nie jestem przeciwny używaniu go, jeśli nie znaleziono lepszego rozwiązania

.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

I wreszcie stosować metodę powiedzieć w komentarzach na pytanie za. Ponieważ mój tekst jest dodawany za pomocą JavaScript, po dodaniu znaków specjalnych dodam tylko  , aby dodać go do mojej strony.

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

także użyłem CSS word-wrap:break-word; wyciąć słowa zbyt długie

Answer 2

I zostały zaktualizowane css w Twojej przykładzie. Spójrz, jeśli to jest to, co próbujesz zrobić.

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

CSS wygląda następująco:

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