Переполнение текст в Flexbox Autosize контейнер

Question

Я использую FlexBox для приложения, и я хочу, чтобы обрезать текст в .text с flex-grow: 1

CodePen

Джейд расположение:

main 
    aside 
    content 
     section Hello 
     footer 
     .panel 
      .avatar 
      .text 
      div Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at 
      .actions 
      .act 
      .act 
      .act 

Answer 1

вы должны использовать min-width:0 и установить flex-basis (удаление flex-grow:1) в исходное положение

затем добавить природные свойства многоточия эффектов в ребенке div:

overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 

---

main { 
 
    display: flex; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    max-width: 100%; 
 
} 
 
aside { 
 
    display: flex; 
 
    width: 200px; 
 
    flex-shrink: 0; 
 
    background: rgba(238, 130, 238, 0.5); 
 
} 
 
content { 
 
    display: flex; 
 
    flex-grow: 1; 
 
    flex-flow: column nowrap; 
 
} 
 
content section { 
 
    display: flex; 
 
    background: rgba(0, 128, 0, 0.2); 
 
    flex-grow: 1; 
 
} 
 
content footer { 
 
    display: flex; 
 
    height: 70px; 
 
    justify-content: center; 
 
} 
 
content footer .panel { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    width: 100%; 
 
    background: rgba(0, 0, 255, 0.2); 
 
    height: 100%; 
 
} 
 
content footer .panel .avatar { 
 
    display: flex; 
 
    background: rgba(255, 255, 0, 0.4); 
 
    height: 70px; 
 
    width: 70px; 
 
    flex-shrink: 0; 
 
} 
 
content footer .panel .text { 
 
    align-items: center; 
 
    display: flex; 
 
    flex-basis: 85%; 
 
    margin-left: 10px; 
 
    min-width: 0; 
 
} 
 
content footer .panel .text div { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
content footer .panel .actions { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    flex-shrink: 0; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
content footer .panel .actions .act { 
 
    width: 40px; 
 
    height: 40px; 
 
    margin: 0 10px; 
 
    background: rgba(238, 130, 238, 0.6); 
 
}

<main> 
 
    <aside></aside> 
 
    <content> 
 
    <section>Hello</section> 
 
    <footer> 
 
     <div class="panel"> 
 
     <div class="avatar"></div> 
 
     <div class="text"> 
 
      <div>Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse 
 
      non nisl sit amet Donec mi odio faucibus at</div> 
 
     </div> 
 
     <div class="actions"> 
 
      <div class="act"></div> 
 
      <div class="act"></div> 
 
      <div class="act"></div> 
 
     </div> 
 
     </div> 
 
    </footer> 
 
    </content> 
 
</main>

Answer 2

Вы можете использовать обычный JavaScript, чтобы разрезать данную строку в JADE, предваряя новую линию с -. Например - var myVar = 'contains a string'.slice(0,5)

В вашем случае вы можете изменить JADE-код, как это, here is the PEN

.panel 
    .avatar 
    .text 
    - var divContent = 'Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at Vestibulum ullamcorper mauris at ligula Suspendisse non nisl sit amet Donec mi odio faucibus at' 
    div.notTruncated= divContent 
    - var divContentTruncated = divContent.slice(0,180) 
    div.truncated= divContentTruncated + '...' 

CSS-Solution

Прежде всего, вам нужно обернуть текст с block или элемент inline-block. Если вы используете элемент inline, он не работает, за исключением того, что вы изменяете поведение элемента с помощью css. Если вы хотите прочитать что-то о css nowrap и эллипсах, go to this page.

Это будет CSS для элемента, here is your PEN

.truncatedText { 
    text-overflow: ellipsis; 
    width: 250px; 
    white-space: nowrap; 
    overflow: hidden; 
    display:inline-block; 
}