CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
kuanb
kuanb

Reputation: 1708

How to prevent label overflow onto multiple lines w/ Bootstrap in FF

I have a panel and panel-body within which lies a dynamic number of span elements. In Safari and Chrome, they look fine and move to the next line when they fill up a row. In FF, they do a weird spill over. Please refer to the images:

Chrome, Safari: enter image description here

FF: enter image description here

The spans are created in an ejs template as part of a Node app. Is this a FF quirk or my error? If the prior, is there a workaround?

    <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>

Here is an example of one span, once rendered:

    <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>

Upvotes: 2

Views: 669

Answers (1)

Stephen Thomas
Stephen Thomas

Reputation: 14053

Hard to say for sure since you haven't posted your CSS, but I suspect the problem is that you're styling them as inline-block and the problem is due to extra spaces within the <span> elements. Instead of

<span ...>
    Bx16
</span>

You could try either

<span ...>Bx16</span>

or

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

Upvotes: 1

Related Questions