Linebreaks in popover - angular-ui-bootstrap

Question

I have a popover where i want all the content of my span tags to stay on the same line but allow linebreakes between span tags if needed.
But if i apply white-space: nowrap; on my span tags all my content is placed on one line and going outside the popover.
<button uib-popover-template="dynamicPopover.templateUrl" type="button" class="btn btn-default">Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<span style="white-space: nowrap;">Word one, </span>
<span style="white-space: nowrap;">Word two, </span>
<span style="white-space: nowrap;">Word three, </span>
<span style="white-space: nowrap;">Word four, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
</div>
</script>
http://plnkr.co/edit/grWorND24x0Zo378hGxO?p=preview

Answer 1

You need spaces between the span tags otherwise it will treat it like 1 word.
A more maintainable solution is to use "display: inline-block;". It tries to keep text of each item on 1 line but only if it all fits on that line. It also breaks to the next line if it's going to overflow and takes up an entire line.
Also, I would suggest using css styles instead of inline styles since those are much more maintainable. If you don't want to make a stylesheet you can do something like this:
<style>
.popover-content span {
display: inline-block;
}
</style>