现在的问题是,当我使用AngularJS生成元素时,text-align justify不再起作用了.
我做了一个模拟它的例子:
.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%; }