HTML CSS justify trick does not work in combination with angularJS

Question

I am trying to make a element with inner elements that should be justified.

Now is the problem that when I generate the elements with AngularJS text-align justify does not works anymore.

I've made a example that simulate it:

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

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

Is there anything I can change in AngularJS or with CSS.

How can i do this ?

AngularJS code:

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

tags is just a javascript array:

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

Answer 1

Take a look at this fiddle, I think is what you need: http://jsfiddle.net/2AaWf/10/

I included also a live AngularJS example. The idea is to use a wrapper element (a span), and to put the link and a whitespace inside it.

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

Answer 2

You can refer to this issue Angular: Why doesn't CSS justification work with ng-repeat?
This issue use ng-repeat-start and ng-repeat-end to fix this:

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

The reason why you have this issue is because of the HTML ngRepeat created lacks the correct spacing, and the justify css property will not work correctly. So what you need to do is add the correct spacing.

Also, if you use directive to add some extra elements, and you want it to work with 'justify'. You can use '\n' to create the spacing like this:

element.append('<span><a href="#">Extra element</a></span>\n');