Применить «переполнение текста: многоточие»; на внутренний div

Question

У меня есть структура div, похожая на следующее изображение.

Мне нужно применить «переполнение текста: многоточие»; к тексту в этой структуре сНа в небольших окнах. (изображение 2)

Но это не относится, как я ожидал. это мой HTML-код

.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 вам нужно установить эти правила CSS на нем:

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

Вот jsfiddle, где я добавил их в классе .shared лица. https://jsfiddle.net/3dukmv5q/