html - Flexbox "nowrap"值不起作用

Question

这是我的代码中不起作用的部分:

.copyright {
  display: flex;
  flex-wrap: nowrap;
  /* This is not working */
  color: red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p>Sample</p>
<span>
  <li class="fa-stack">
    <i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
  </li>
  <li class="fa-stack">
    <i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
  </li>
</span>
<br><br>
<p class="copyright">
  <span>I want this left from icons</span>
  <span>
   <li class="fa-stack">
    <i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
   </li>
   <li class="fa-stack">
    <i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
   </li>
  </span>
</p>

你知道为什么 flexwrap: nowrap;不工作？我的图标位于跨度下方，而不是放置在右侧。

Answer 1

它不起作用，因为 flex-wrap: nowrap适用于 flex 元素，而不是元素内的文本。您需要使用 white-space: nowrap 定位文本.

.copyright {
     display:flex;
     flex-wrap: nowrap;   /* will prevent flex items on the same line from wrapping */
     white-space: nowrap; /* will prevent text from wrapping */
}

jsFiddle demo