title: Apply "text-overflow: ellipsis;" to inner div
body: <p>I have a div structure similar to following image. 
  <a href="https://i.stack.imgur.com/B1Avk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/B1Avk.png" alt="image 1"></a></p>
  
  <p>I need to apply "text-overflow: ellipsis;" to text in this div structure in smaller windows.(image 2)</p>
  
  <p><a href="https://i.stack.imgur.com/wNrAB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wNrAB.png" alt="image 2"></a></p>
  
  <p>But it didn't apply as I expect. this is my HTML code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .header {
    height: 60px;
    width: 100%;
   }
   .header &gt; .header_middle {
    margin: 0 auto;
    width: 100%;
   }
   .header &gt; .header_middle.share-file-header &gt; .caption {
    float: left !important;
    line-height: 60px;
    overflow: hidden;
    padding-right: 0 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 30px;
   }
   .header &gt; .header_middle.share-file-header .settings {
    line-height: inherit;
    padding: 0 15px 0 0;
    float: right;
    height: 60px;
    position: relative;
   }
   .shared-person-detail-wrapper {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: inherit;
   }
   .settings .share-files-msg, .settings .shared-person {
    display: block;
    font-size: 14px;
    text-overflow: ellipsis;
   }
   .settings .more-persons-wraper {
    display: inline-block;
    position: relative;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="header"&gt;
      &lt;div class="header_middle share-file-header"&gt;
          &lt;div class="caption"&gt;
              &lt;p&gt;
                  &lt;a href="/"&gt;
                      &lt;img src="/resources/Image1.png" alt="Image 1" title="Image 1"&gt;
                  &lt;/a&gt;
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="settings"&gt;
              &lt;div class="shared-person-detail-wrapper"&gt;
                  &lt;div class="shared-person"&gt;
                      User Name &lt;a href="mailto:user@email.com"&gt;(user@email.com)&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="share-files-msg"&gt;
                      has shared file(s) with you
                      &lt;div class="more-persons-wraper"&gt;and some &lt;a href="#" data-toggle="dropdown" id="more"&gt;more&lt;/a&gt; people.
                          &lt;ul class="dropdown-menu pull-right" id="more-persons"&gt;
                              &lt;li&gt;user1@email.com&lt;/li&gt;
        &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="share-icon"&gt;&lt;img src="/resources/Image2.png" alt="Image 2" title="Image 2"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What is the wrong with this code, can any one give me a guide ?? thank you</p>