title: Trying to turn long title in to ellipsis on responsive design
body: <p>I'm designing a responsive web app, and I'd like to encapsulate long text in the title with an ellipsis. How can I do this? It's a responsive page (no fixed-width)...</p>
  
  <p>Here is an example</p>
  
  <p><img src="https://i.stack.imgur.com/lypM3.jpg" alt="Example of what I&#39;d like to achieve"></p>
  
  <p>Can anyone help?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I added a max-width and an ellipsis overflow like this:</p>
  
  <pre><code>max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  </code></pre>
  
  <p>But this won't work for me because the key here is <em>responsiveness</em>. I don't to target the max-width of the title specifically for iOS mobile browsers, I want the max-width to enlarge or reduce on all smart phones. Any suggestions?</p>