html - 如何在 FF 中使用 Bootstrap 防止标签溢出到多行

Question

我有一个 panel 和 panel-body，其中包含动态数量的 span 元素。在 Safari 和 Chrome 中，它们看起来很好，当它们填满一行时会移动到下一行。在 FF 中，他们做了一个奇怪的溢出。请引用图片:

Chrome、Safari:

FF:

跨度是在 ejs 模板中创建的，作为 Node 应用程序的一部分。这是 FF 怪癖还是我的错误？如果是之前的，是否有解决方法？

    <div id="stops">
        <h4>Explore Individual Stops</h4>
        <% for (var d = 0; d < route.stops.length; d++) { %>
            <ul style="float:left">
                <h5><%= route.directions[d] %> Direction</h5>
                <% for (var i = 0; i < route.stops[d].length; i++) { %>
                    <li style="list-style-type:none">
                        <a href="/routes/<%= route.route_id %>/<%= d %>/<%= route.stops[d][i].stop_id %>"><%= route.stops[d][i].stop_name %></a>
                    </li>
                <% } %>
            </ul>
        <% } %>
    </div>

这是一个跨度的示例，一旦呈现:

    <span class="label bus-lapel" 
                id = "BX16"
                style="background-color: #00AEEF;
                            color: #FFFFFF;" 
                onclick="gotoroute('BX16')"
                api-route-boro="Bronx" 
                api-route-desc="via E 233rd St / Nereid Av" 
                api-agency-id="MTA NYCT" 
                api-route-url="http://web.mta.info/nyct/bus/schedule/bronx/bx016cur.pdf">
        Bx16
    </span>

Answer 1

很难确定，因为您还没有发布您的 CSS，但我怀疑问题是您将它们的样式设置为 inline-block问题是由于 <span> 中的额外空格造成的元素。而不是

<span ...>
    Bx16
</span>

你也可以试试

<span ...>Bx16</span>

或

   <span ...><!--
    -->Bx16<!--
--></span>