4

我正在尝试使用应该合理的内部元素制作一个元素。

现在的问题是，当我使用 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}]
4

1 回答 1

1

分析

当我第一次看到这个时，我被难住了，但经过一番挖掘，我发现了原因。这个问题与这个问题有些相关。只是引用：

一般来说，换行符相当于 HTML 中的空格。有一些例外，根据关于换行符的正式规则，应该在两个帐户上忽略换行符（它紧跟在开始标签之后，紧跟在结束标签之前）。但是浏览器从来没有正确地实现这些功能，所以他们把你的标记当作……

这里发生的事情是，在您的第二个示例中，每个项目都放在下一个项目旁边，没有任何空白。如果没有任何空格，浏览器会将其视为一个连续的单词。

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>有所作为，请告诉我。我试着弄乱 css for <span>，但结果总是一样的。

角模板：

<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%;
}
于 2014-03-28T21:25:26.433 回答