html - 为什么我会从s 内部溢出?

Question

我的 HTML 非常简单，但由于某种原因，我得到了一个奇怪的溢出。我似乎无法理解它来自哪里以及如何摆脱它。

这是我的 HTML：

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

这是我的 CSS：

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

我拥有的角度代码很长（一长串标签），但这是它的要点：

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

这是一个完整的 Plunker。

为什么<span>元素不包裹在里面<div>，而是溢出？

Answer 1

您的单词之间没有空格（这就是您必须添加的原因padding-right），因此它们都被视为一个单词。这是 Angular 删除空格的副作用^{_{，这本身就是 Angular 的副作用，只是不是很好}}。

放个空格进去。

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

瞧