title: Ionic: How to display ion-item on multiple lines?
body: <p><strong>THE SITUATION:</strong></p>
  
  <p>I am using Ionic to build an app.</p>
  
  <p>I need to display a list of info regarding some people.
  To obtain that i am using the <a href="http://ionicframework.com/docs/api/directive/ionList/">ionic list</a> <code>&lt;ion-list&gt;</code> along with <code>&lt;ion-item&gt;</code> since the layout it offers it is exactly what i need.</p>
  
  <p>The only problem is that each <code>&lt;ion-item&gt;</code> seems to be forced to stay on a single line, cutting the extra text it contains, as shown it the picture:</p>
  
  <p><img src="https://i.stack.imgur.com/xzsKc.png" alt="enter image description here"></p>
  
  <p><strong>THE CODE:</strong></p>
  
  <pre><code>&lt;ion-list&gt;
      &lt;ion-item class="item"&gt; Name: &lt;b&gt; {{ person.name }} &lt;/b&gt; &lt;/ion-item&gt;
      &lt;ion-item class="item"&gt; Email: &lt;b&gt; {{ person.email }} &lt;/b&gt; &lt;/ion-item&gt;
      &lt;ion-item class="item"&gt; Title: &lt;b&gt; {{ person.title }} &lt;/b&gt; &lt;/ion-item&gt;
      &lt;ion-item class="item"&gt; Bio: &lt;b&gt; {{ person.bio }} &lt;/b&gt; &lt;/ion-item&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p><strong>PLUNKER:</strong></p>
  
  <p>Here is a plunker that recreates the situation. You can try to resize the browser, or the internal windows, and you can see how ion-item cut out the extra content.</p>
  
  <p><a href="http://plnkr.co/edit/Qx9fYRpiATK4lgj5g5Rk?p=preview">http://plnkr.co/edit/Qx9fYRpiATK4lgj5g5Rk?p=preview</a></p>
  
  <p><strong>THE QUESTION:</strong></p>
  
  <p>How can i display the extra content in a <code>&lt;ion-item&gt;</code> element? <br />
  Is it possible to display the content in multiple lines?</p>