0

私の HTML は非常にシンプルですが、何らかの理由で奇妙なオーバーフローが発生します。それがどこから来ているのか、どうやってそれを取り除くのか理解できないようです。

これは私のHTMLです：

<div class="labels">
    <span ng-repeat="label in labels">{{label}}</span>
</div>

これは私のCSSです：

.labels {
    width: 300px;
    background: #AAFFEE;
}

私が持っているAngularコードはかなり長いです（ラベルの長いリスト）が、その要点は次のとおりです。

angular.module('guy',[]).controller('Guy', function($scope) {
    $scope.labels = [
        'adding and subtracting',
        'audio',
        …
    ];

これが完全なプランカーです。

<span>要素が の中で折り返されず<div>、オーバーフローするのはなぜですか?

4

1 に答える 1

4

単語の間にスペースがないため (これが を追加する必要があった理由ですpadding-right)、すべて 1 つの単語として扱われます。これは、Angular がスペースを削除することの副作用であり、それ自体が Angular の副作用であり、あまり良くありません。

スペースを入れてください。

<div class="labels">
  <span ng-repeat="label in labels">{{label}} </span>
</div>

ほら

于 2013-10-20T20:32:42.740 に答える