"टेक्स्ट-ओवरफ्लो: इलिप्सिस" लागू करें; आंतरिक div

Question

में मेरे पास निम्न छवि के समान एक div संरचना है।

मुझे "टेक्स्ट-ओवरफ्लो: इलिप्सिस" लागू करने की आवश्यकता है; छोटे खिड़कियों में इस div संरचना में पाठ में। (छवि 2)

लेकिन यह लागू नहीं किया था के रूप में मैं उम्मीद करते हैं। यह मेरा एचटीएमएल कोड

.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>

क्या इस कोड के साथ गलत है, किसी भी एक मुझे एक गाइड दे सकता है ?? एक तत्व के लिए आप

Answer 1

धन्यवाद आदेश में के रूप में elipsis आप उस पर इन सीएसएस नियम निर्धारित करने की आवश्यकता अतिप्रवाह के लिए:

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

यहाँ एक jsfiddle जहाँ मैं .shared व्यक्ति वर्ग पर इन को शामिल किया है है। https://jsfiddle.net/3dukmv5q/