How to make LI elements wrap in UL?

Question

I have two pretty similar examples,but LI behaves differently each time:

1) li element is not getting wrapped

HTML

 <ul class="list">
  <li class="item">First</li>                 
  <li class="item">Sssssssssssssssssssssssssssssssssed</li>
  <li class="item">Third</li>
  <li class="item">Fourth</li>
</ul>

CSS

  .list {
   width:300px;
   background-color: lightblue;
   font-size: 50px;
  }

2) li element gets wrapped

HTML

<ul class="list">
  <li class="item">First</li>                 
  <li class="item">Third very very long long long long long long lont </li>
  <li class="item">Third</li>
  <li class="item">Fourth</li>
</ul>

CSS

.list {
  width:300px;
  background-color: lightblue;
  font-size: 50px;
}