Html css用angularJS证明了故障

我试图用一个应该被证明的内部元素来创建一个元素.

现在的问题是,当我使用AngularJS生成元素时,text-align justify不再起作用了.

我做了一个模拟它的例子：

http://jsfiddle.net/2AaWf/1/

.container {
   text-align: justify;
}
span,a {
   display: inline-block;
}

我可以在AngularJS或CSS中更改任何内容.

我怎样才能做到这一点 ？

AngularJS代码：

<a ng-repeat="tag in tags" href="#">{{tag.name}}</a>

tags只是一个javascript数组：

[{"id":"1","name":"Tag name","count":"1","weight":2}]

解决方法

分析

我第一次看到这个时感到难过,但经过一番挖掘,我发现了原因.这个问题与这个question有些相关.只是引用：

In general,a line break is equivalent to a space in HTML. There are some exceptions,and according to formal rules on line breaks,the break should be ignored on two accounts (it immediately follows a start tag and immediately precedes an end tag). But browsers never implemented such features properly,so they treat your markup as equivalent to …

这里发生的是,在你的第二个例子中,每个项目都放在下一个项目旁边,没有任何空格.没有任何空格,浏览器会将其视为连续的单词.

He<b>llo,Wo</b>rld!

呈现为内联：

Hello,World

在您的情况下,以下代码：

<a href="#">Lorem ipsum</a><a href="#">Lorem ipsum</a><a href="#">Lorem ipsum</a><a href="#">Lorem ipsum</a><a href="#">Lorem ipsum</a><a href="#">Lorem ipsum</a>

呈现内联为

Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum

因此它将整个事物视为一个内联框.

解

下面是一个解决方案,但我不确定它为什么会起作用.基本上,您希望包装锚点并在模板中强制使用空格字符.有趣的是,如果你替换< b>使用< span>,整个事情再次破裂.这对我来说毫无意义,因为< b>和< span>是内联元素. jsfiddle

如果有更深入了解为什么< b>的人和< span>有所作为,请告诉我.我尝试使用< span>的css,但结果总是一样的.

角度模板：

<div ng-app="app" ng-controller="ctrl" class="container">
    <b ng-repeat="tag in tags">
        <a href="#">{{tag.name}}</a>
    </b>
    <span class="last-child"></span>
</div>

CSS

.container {
    width: 100%;
    text-align: justify;
}

.container b {
    font-weight: normal;
}

.container a,.container span {
    display: inline-block;
}

.last-child {
    width: 100%;
}