改行はポップオーバー

Question

に私は私が私のspanタグのすべてのコンテンツは、同じ行にとどまるが、必要であれば、spanタグの間linebreakesを許可するポップオーバーを持っています。

しかし、私は私のspanタグにwhite-space: nowrap;を適用した場合、すべての私のコンテンツが1行に配置し、ポップオーバー外で起こっています。

<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

あなたはそれ以外の場合は1つの単語のように扱うだろうspanタグの間のスペースを必要としています。

より保守溶液「：インラインブロック表示を、」使用することです。これは、1行に各項目のテキストを維持しようとしますが、それはすべてその行に収まる場合にのみ。また、オーバーフローために起こっている場合、次の行に分割し、行全体を占めています。

また、私はそれらをはるかに保守されているため、インラインスタイルの代わりにCSSスタイルを使用してお勧めします。スタイルシートを作成したくない場合は、次のようにすることができます：

<style> 
.popover-content span { 
    display: inline-block; 
} 
</style>