popover中的换行符

Question

我有一个弹出框，我希望我的span标签的所有内容都保持在同一条线上，但如果需要，可以在span标签之间允许换行。

但是如果我在我的span标签上应用white-space: nowrap;，我的所有内容都放在一行上，然后移到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

你需要在span标签之间留出空格，否则它会像1个单词一样对待它。

更易于维护的解决方案是使用＆＃34; display：inline-block;＆＃34;。它会尝试将每个项目的文本保留在1行，但前提是它只适用于该行。如果它会溢出并占据整行，它也会突破到下一行。

另外，我建议使用css样式而不是内联样式，因为它们更易于维护。如果您不想制作样式表，可以执行以下操作：

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