Html css justifies failure with angularJS

Question

I am trying to make an element with internal elements that should be justified.

Now the problem is that when creating elements using AngularJS, text alignment alignment no longer works.

I made an example that mimics it:

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

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

Is there anything that I can change in AngularJS or 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

Analysis

, , , . question. :

HTML. , ( ). , ...

, , - . - .

He<b>llo, Wo</b>rld!

inline:

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>

inline

Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum

.

, , . , . , <b> <span>, . , <b>, <span> . jsfiddle

- , <b> <span> , . css <span>, .

Angular :

<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%;
}