文本在flex-box列中不会被截断（省略号）

Question

我有以下li，并且我需要用省略号将跨度截断，这在我的代码中是没有发生的。

我真的需要将div.column设为display: flex和flex-direction: column。有什么办法可以将其与省略号相结合吗？

谢谢：）

li {
  width: 400px;
  display: flex;
}

div.img {
  flex: 0 0 100px;
  height: 75px;
  background-color: lightcoral;
}

div.column {
  flex-shrink: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid blue;
}

span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

  <ul>
    
    <li>
      
      <div class="img"></div>
      
      <div class="column">
        
        <span class="title">Title</span>
        <span class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt iure aspernatur eligendi possimus inventore omnis dolorum. Harum, id, quibusdam quis quam necessitatibus dolores perspiciatis ratione sapiente rerum et ex, libero.</span>
        
      </div>
      
    </li>
    
    
  </ul>