为什么我会从 <div> 中的 <span>s 溢出？ [关闭]答案

【问题标题】：Why do I get an overflow from <span>s inside a <div>? [closed]为什么我会从 <div> 中的 <span>s 溢出？ [关闭]
【发布时间】：2013-10-21 04:37:01
【问题描述】：

我的 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',
        …
    ];

Here is a full Plunker.

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

【问题讨论】：

请在问题中包含您的代码。
我认为如果我添加一个指向 plunkr 的链接，如果不是更好的话，也是一样的。
不，不是更好。您在此处发布的代码将与您的问题一起提供给稍后阅读该问题的人（因此，即使在多年之后，他们也可能从中受益），而任何外部站点上的代码可能早已不复存在.
对于所有亲密的选民，我已经澄清了这个问题。请重新考虑。
CBroe - 措辞很好。

标签： html css angularjs

【解决方案1】：

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

在里面放一个空格。

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

Voilà

【讨论】：

感谢您快速而认真的回复。我对这个问题的糟糕回答感到有点震惊。你能详细说明为什么angular just not being very good吗？
@MicahDelaneBolen：屏幕阅读器屏幕阅读器屏幕阅读器语义搜索引擎
@guymograbi：啊，别理我 :) 我有点反对客户端模板交易（主要是出于可访问性的原因），但没那么严重。
@minitech：我现在正在上传我的 plunker 的屏幕阅读器测试。
感谢 minitech。我不能感谢你。并感谢您编辑问题。没有你我会迷路的。