Html css用angularJS证明了故障

概述我试图用一个应该被证明的内部元素来创建一个元素. 现在的问题是,当我使用AngularJS生成元素时,text-align justify不再起作用了. 我做了一个模拟它的例子： http://jsfiddle.net/2AaWf/1/ .container { text-align: justify;}span, a { display: inline-block;} 我可以在 我试图用一个应该被证明的内部元素来创建一个元素.

现在的问题是,当我使用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" >    <b ng-repeat="tag in Tags">        <a href="#">{{tag.name}}</a>    </b>    <span ></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%;}

总结

以上是内存溢出为你收集整理的Html css用angularJS证明了故障全部内容，希望文章能够帮你解决Html css用angularJS证明了故障所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。