文字列区切りがある場合、ハイフンを挿入します。AngularJS

Question

固定の幅の中に文字列がバインドされています。文字列は短くても長くてもかまいません。

元の文字列が壊れるたびに、最後の行を除くすべての行にハイフンを挿入する必要があります。

例：>

misc 
once 
ptio 
n 

- - ではなく、このようなの>

misc- 
once- 
ptio- 
n 

文字列が"誤解"であり、それはmiscので破った場合、それは次のように表示されます

注：私は次のCSSを試しました：

-webkit-hyphens: auto; 
    -ms-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens: auto; 

しかし、問題はhyphensは辞書の単語でのみ機能することです。私の場合、文字列は何でもかまいません（例：名前、ジャンク文字列など）。私の場合はhyphensが動作しません。

ここでdemoを参照してください。

Answer 1

私は上記の問題をAngularJSでスクリプトを作成して解決できましたが、CSSは必要ありません。以下

コード：

JS：

$scope.data = "Loremipsumdolorsitametexeamdictasmeliuslaboramus Duoadverearinteresset"; 
    var text = $scope.data; 
    var array = text.split(''); 
    len = 18; 

    var newtext = ''; 
    for (var i = 0; i < array.length; i++) { 
    newtext += array[i]; 
    if (i % len == 0 && i > 1) { 
     newtext += '-</br>'; 
    } 
    } 
    document.getElementById('text').innerHTML = newtext; 

HTML：

<div class="test" id="text"></div> 

Demo