javascript - 如果有字符串中断 AngularJS，则插入连字符

Question

在固定宽度 的div 中，一个字符串被绑定(bind)到它上面。字符串可以很短也可以很长。

我希望每当原始字符串中断时，它应该为除最后一行之外的每一行插入一个连字符。

例如:如果字符串是“misconception”并且它在misc处中断，那么它应该看起来像->

misc-
once-
ptio-
n

而不是像这样->

misc
once
ptio
n

注意:我已尝试使用以下 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