Within my panel and panel-body, there are multiple span elements that display dynamically. These spans behave perfectly in Safari and Chrome, wrapping to the next line when needed. However, in Firefox, they overflow strangely. Here are the comparisons:
Chrome, Safari: https://i.stack.imgur.com/BD0Cq.png
Firefox: https://i.stack.imgur.com/Ivmcq.png
The spans are generated through an EJS template within a Node app. Could this issue be specific to Firefox, or is it something I have overlooked? If it's related to Firefox, is there a workaround available?
<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 a single rendered span element:
<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>