目录
介绍
在Box里寻找解决方案
开箱即用的解决方案
总结
这将是一个简短的教程。我发现应用程序中的错误是寻找解决方案的最佳动力。最近，我遇到了一个很小的问题，首先似乎无法解决。当解决方案可用时，它似乎是如此简单，以至一开始它甚至都不是问题。无论如何，我认为这个问题及其解决方案值得记录。就我而言，我无法在线找到任何解决方案。对于其他所有人来说，这太简单或太不重要了。如果其他人遇到相同的问题，此解决方案也可以提供帮助。
那是什么问题呢？试想一下，你有一个span元素列表，它们被Bootstrap的标签类修饰（label和label-info或label-success，label-warning等等）。当它们显示在屏幕上时，它们以一行显示。当页面调整大小时，它们仍显示为一行，并且无法正确地自动对齐为多行。这是此问题的屏幕截图：
为什么会发生此问题？我承认我有点天真。我直接在span元素上使用ngRepeat（AngularJS的）。这就是我所做的。我坦率地承认我做这件事的时候并不了解。我应该更了解：
<div class="row"> <div class="col-xs-12"> <span class="label label-info" ng-repeat="item in vm.keywords">{{item}}</span> </div> </div>如您所见，HTML标记看起来很合理。我没有意识到的是，通过这种设计，该span元素将一个接一个地放置，并且它们之间没有任何间隔。并且span是内联元素，此类元素排列会导致问题，如上面的屏幕截图所示。
我尝试的第一个解决方案是当ngRepeat指令是元素的一部分时如何为span元素添加额外的空间。对于Google来说，这是一个非常棘手的问题。很难找到一个直接的答案。
事实证明，有一种解决方案能赢得大奖。这是正确的解决方案。然而，它是如此的虚幻，该解决方案隐藏在Google搜索结果的第五页中。不幸的是，我找不到该页面了。否则，我会适当地感谢那个家伙。无论如何，我没有想到这个答案。这很棘手，而且我对HTML5的了解还不足以提出这样的东西。解决方案是在元素末尾添加一个空格字符。当ngRepeat在循环中复制元素时，它将确保正确管理元素之间的间距。这是通过CSS完成的。
使用CSS和HTML5，您可以指定要在HTML元素之后添加的内容。因此，这是在我发现的解决方案中定义CSS类的方式：
.space::after { content: " "; }CSS定义非常简单，对于任何带有CSS类“space”的元素，最后都添加一个空格字符。CSS中的content关键字表示要添加的样式是文本内容。因此，用单引号或双引号引起来的任何内容都是要添加到元素末尾的文本内容。
以下是此新CSS类在解决方案中使用ngRepeat的方式：
<div class="row"> <div class="col-xs-12"> <span class="space" ng-repeat="item in vm.keywords"> <span class="label label-info">{{item}}</span> </span> </div> </div>这是所有span元素都正确对齐并分成几行的屏幕截图：
这里的想法是将span元素包装在另一个span元素内。额外的内容空间将添加到外部span元素的末尾。当将span元素（外部元素）添加到页面的DOM树中时，这可以确保span元素（外部元素）的适当间距。
这是解决方案＃1，它教会了我两件事：
使用CSS和HTML 5，可以轻松地向HTML页面添加额外的内容。可以将一个span元素包装在另一个span元素内。第二点是我应该意识到的，但是直到将其作为解决方案提供给我时才看到。第一点是我真的不知道的事情。如果我忽略了这个问题，或者只是提出了一个虚拟的解决方案而忘了它，那我将一无所知。因此，每一个试图修复的错误都将教给我们一些我们不知道的东西。
现在，我知道可以将一个span元素包装在另一个span元素中，是否还有另一种方法可以解决此问题？事实证明，我不必使用本节中描述的复杂解决方案，而是使用新的CSS类以某种方式添加额外的空间。
我想提出的解决方案是在每个span元素后添加某种空格，以免它们彼此“粘”在一起。内置解决方案是我为每个span元素添加一个空格。
有了解决方案，我就能完成它。但是，解决方案很复杂。除非有人知道如何在CSS中使用content关键字，否则无法在元素末尾添加空格。而且，如果其他人正在查看此实现，但他们不知道这种设计的意图，则可能会发生一些意外更改，最终会破坏该实现。
有没有更好的方法来解决原始问题？有。这是我最后提出的实现：
<div class="row"> <div class="col-xs-12"> <span ng-repeat="item in vm.keywords"> <span class="label label-info">{{item}}</span> </span> </div> </div>你能看到这里的区别吗？我所做的只是取出外部span元素的CSS类“space”。如果您已经猜到了，您可能以为不需要放在最后的空格。当外部使用ngRepeat进行span复制时，最终的DOM元素将如下所示：
<div class="row"> <div class="col-xs-12"> <span ... > <span class="label label-info">{{item #1}}</span> </span> <span ... > <span class="label label-info">{{item #2}}</span> </span> <span ... > <span class="label label-info">{{item #3}}</span> </span> <span ... > <span class="label label-info">{{item #4}}</span> </span> <span ... > <span class="label label-info">{{item #5}}</span> </span> <span ... > <span class="label label-info">{{item #6}}</span> </span> ... </div> </div>使用此类DOM元素表示，每个span元素之间有足够的空间。因此，根本没有必要在CSS类规范中添加额外的空间。如果我从不说要用另一个span元素包装一个span元素。我永远无法得出这个结论。我觉得这是我陷入困境的解决方案。
这是所有三种对齐方式的屏幕截图：
首先是有问题的实现。第二个是CSS类的解决方案。最后一个是我删除CSS类的那个，它仍然按预期工作。因此，根本不需要新的CSS类。
就是这个。这是一个简短的教程。我对本教程的目标很简单。首先，我只想向您展示使用ngRepeat并且span不进行任何包装是一个坏主意。将所有span元素放在一行中会导致问题。当页面的整体宽度变小时，它们将不会重新对齐为多行。第二个目标是讨论我如何学习使用CSS和HTML 5添加新的文本内容。这对于将来的项目可能很有用。最后，我吸取的教训是我可以将一个span内部包装在另一个span元素中。这使我可以在外部span元素中使用ngRepeat指令，而将内部span元素用于实际的显示装饰。原来包装span 实现无需复杂的设计即可解决此问题（使用CSS在HTML元素的末尾添加空格）。
