Exploration
Upon first glance, I was perplexed by this issue. However, with a bit of investigation, I uncovered the reason behind it. This particular question shares similarities with another topic discussed in this thread. To quote a relevant segment:
Typically, in HTML, a line break is treated as a space. Although there are exceptions, and based on strict line break guidelines, certain breaks should be disregarded if they occur right after an opening tag and just before a closing tag. Yet, due to browsers not consistently implementing such rules, your markup gets interpreted as ...
The issue at hand is that in the second example provided, each item is placed immediately next to the following item without any whitespace. Consequently, without any whitespace present, the browser interprets it as one continual word.
He<b>llo, Wo</b>rld!
This code snippet would be displayed inline as:
Hello, World
In this scenario, the code:
<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>
Gets rendered inline like this:
Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum
Therefore, it treats the entire sequence as a single inline block.
Resolution
Here is a proposed solution, although the reason behind its effectiveness remains unclear to me. Essentially, you need to wrap your anchors and introduce a whitespace character into your template. Curiously, replacing <b> with <span> causes the problem to resurface. This paradox confounds me since both <b> and <span> are inline elements. For further details, refer to this jsfiddle.
If anyone can elucidate why the use of <b> versus <span> yields different outcomes, kindly share your insights. I have experimented with the css for <span>, yet the results remain consistent.
Angular Template:
<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%;
}