title: Word wrap text in child div if it doesn't fit parent div width
body: <pre><code>&lt;div class='jfmfs-friend' id='123'&gt;
    &lt;input type='checkbox'/&gt;
    &lt;img src='id.jpg'/&gt;
    &lt;div class='friend-name'&gt;Himanshu Yadav&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to wrap text inside <code>friend-name</code> div.
  I tried </p>
  
  <pre><code>div.friend-name  {
      margin-left: 10px;
      white-space: pre-wrap;
  }
  </code></pre>
  
  <p>Here is the parent div css:</p>
  
  <pre><code>.jfmfs-friend {                
      cursor:pointer;
      display:inline-block;
      float:left;
      height:56px;
      margin:3px;
      padding:4px;
      width:176px;
      border: 1px solid #FFFFFF;
      -moz-border-radius: 5px; 
      -webkit-border-radius: 5px;
      -webkit-user-select:none;
      -moz-user-select:none;
  
  }
  
  .jfmfs-friend div {
      color:#111111;
      font-size:11px;
      overflow:hidden;
      display:inline-block;
  }
  </code></pre>