CSS-阻止文本在跨度中溢出

Question

I am trying to implement 2 lobbies in a menu bar for a mobile app and as long as the text for each lobby doesn't exceed the width of the container everything looks fine:

However, if the text gets too long it all goes horribly wrong:

The height of the container needs to stay fixed at 40px so I gues the best solution is truncate the text. However, there can be 2 or 3 lobbies here so I can't set a specific width on the span, if I use a div instead the layout gets borked. The icon and text needs to sit in the middle of the lobby, so using floats makes a mess of things. Anyone got any ideas?

HTML:

<div class="view lobby-menu-view">
<ul class="lobby-menu-list">
    <li data-lobby-type="lobby1" class="item">
        <div class="borderStyle"></div>
        <a href="#lobby/lobby1">
            <span class="lobby1 icon-home icon"></span>
            <span>Lobby 1</span>
        </a>
    </li>
    <li data-lobby-type="lobby2" class="item active">
        <div class="borderStyle"></div>
        <a href="#lobby/lobby2">
            <span class="lobby2 icon-home icon"></span>
            <span>Lobby 2</span>
        </a>
    </li>
</ul>

CSS:

div.lobby-menu-view {
z-index: -1;
position: relative;
margin: 0;
padding: 0;
width: 100%;
-webkit-box-shadow: 0px 2px 2px 0px rgba(97,59,53,0.7);

ul.lobby-menu-list {
      margin-bottom: 0;;
      text-align: center;
      list-style-type: none;
      margin: 0;
      width: 100%;
      display: table;
      li {
          text-align: center;
          height:40px;
          max-width: 220px;
          float: none;
          line-height: 40px;
          display: inline-block;
          .borderStyle {
               position: absolute;
               height: 50%;
               width: inherit;
               top: 25%;
           }
      }
      a {
          display: block;
          width: 100%;
          height: 100%;
          text-decoration: none;
          position: relative;
          color: #615452;
          font-size: 14px;
          span {
              position: relative;
              vertical-align: middle;
          }
          span.icon {
              display: inline-block;
              background-size: contain;
              width: 20px;
              height: 20px;
          }
      }
      li.active {
          padding: 0px;
          a {
              border-bottom-width: 6px;
              color:red;
              border-bottom-color:red;
              border-bottom-style: solid;
              box-sizing: border-box;
          }
      }

Answer 1

Use word-break: break-all :

.lobby-menu-list {
    word-break: break-all;
}

---

Demo

 .lobby-menu-view { max-width: 400px; } .lobby-menu-view li { width: 50%; float: left; } .lobby-menu-list { word-break: break-all; } 

 <div class="view lobby-menu-view"> <ul class="lobby-menu-list"> <li data-lobby-type="lobby1" class="item"> <div class="borderStyle"></div> <a href="#lobby/lobby1"> <span class="lobby1 icon-home icon"></span> <span>Lobby 1</span> </a> </li> <li data-lobby-type="lobby2" class="item active"> <div class="borderStyle"></div> <a href="#lobby/lobby2"> <span class="lobby2 icon-home icon"></span> <span>Lobbergergrgergergergergergegergergergergergergre</span> </a> </li> </ul> </div>