Html css用angularJS证明了故障

Html css用angularJS证明了故障,第1张

概述我试图用一个应该被证明的内部元素来创建一个元素. 现在的问题是,当我使用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证明了故障所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1055286.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存