Übernehmen Sie "Text-Überlauf: Ellipse;" zum inneren div

Question

Ich habe eine Div-Struktur, die dem folgenden Bild ähnlich ist.

Ich muss "Text-Überlauf: Ellipse;" in Text in dieser div Struktur in kleineren Fenstern. (Bild 2)

Aber es hat nicht gelten, wie ich erwarte. dies ist mein HTML-Code

.header { 
 
\t \t height: 60px; 
 
\t \t width: 100%; 
 
\t } 
 
\t .header > .header_middle { 
 
\t \t margin: 0 auto; 
 
\t \t width: 100%; 
 
\t } 
 
\t .header > .header_middle.share-file-header > .caption { 
 
\t \t float: left !important; 
 
\t \t line-height: 60px; 
 
\t \t overflow: hidden; 
 
\t \t padding-right: 0 !important; 
 
\t \t text-overflow: ellipsis; 
 
\t \t white-space: nowrap; 
 
\t \t padding: 0 30px; 
 
\t } 
 
\t .header > .header_middle.share-file-header .settings { 
 
\t \t line-height: inherit; 
 
\t \t padding: 0 15px 0 0; 
 
\t \t float: right; 
 
\t \t height: 60px; 
 
\t \t position: relative; 
 
\t } 
 
\t .shared-person-detail-wrapper { 
 
\t \t display: inline-block; 
 
\t \t overflow: hidden; 
 
\t \t text-overflow: ellipsis; 
 
\t \t line-height: inherit; 
 
\t } 
 
\t .settings .share-files-msg, .settings .shared-person { 
 
\t \t display: block; 
 
\t \t font-size: 14px; 
 
\t \t text-overflow: ellipsis; 
 
\t } 
 
\t .settings .more-persons-wraper { 
 
\t \t display: inline-block; 
 
\t \t position: relative; 
 
\t }

<div class="header"> 
 
    <div class="header_middle share-file-header"> 
 
     <div class="caption"> 
 
      <p> 
 
       <a href="/"> 
 
        <img src="/resources/Image1.png" alt="Image 1" title="Image 1"> 
 
       </a> 
 
      </p> 
 
     </div> 
 
     <div class="settings"> 
 
      <div class="shared-person-detail-wrapper"> 
 
       <div class="shared-person"> 
 
        User Name <a href="mailto:user@email.com">(user@email.com)</a> 
 
       </div> 
 
       <div class="share-files-msg"> 
 
        has shared file(s) with you 
 
        <div class="more-persons-wraper">and some <a href="#" data-toggle="dropdown" id="more">more</a> people. 
 
         <ul class="dropdown-menu pull-right" id="more-persons"> 
 
          <li>user1@email.com</li> 
 
\t \t \t \t \t \t </ul> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="share-icon"><img src="/resources/Image2.png" alt="Image 2" title="Image 2"></div> 
 
     </div> 
 
    </div> 
 
</div>

Was falsch mit diesem Code ist, kann mir einen Führer geben ?? danke

Answer 1

für ein Element Um ein Überfliessen zu haben, wie Elipsis Sie diese CSS-Regeln auf sie setzen müssen:

white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
width: 60px; #(any width would do) 

hier ein jsfiddle ist, wo ich diese auf der .shared-Person-Klasse hinzugefügt haben. https://jsfiddle.net/3dukmv5q/