弹出窗口中的换行符

Question

我有一个弹出窗口，我希望我的 span 标签的所有内容都在同一行，但如果需要，允许在 span 标签之间换行。

但是，如果我在我的 span 标签上应用 white-space: nowrap;，我的所有内容都将放在一行中并超出弹出窗口。

<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 个单词。

一个更易于维护的解决方案是使用"display: inline-block;"。它试图将每个项目的文本保留在 1 行上，但前提是它都适合该行。如果要溢出并占用整行，它也会中断到下一行。

此外，我建议使用 css 样式而不是内联样式，因为它们更易于维护。如果你不想制作样式表，你可以这样做：

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

弹出窗口中的换行符

Linebreaks in popover

angular-ui-bootstrap