Flex elementi di rete con il lungo testo all'interno

Question

Ho un layout flessione di 3 colonne, come si può vedere in questo fiddle

c'è alcun modo per dire ad un elemento flessibile a ellisse o rompere questo lungo testo? Come potete vedere nella prima colonna ho una parola lunga, se ridimensionate la finestra di anteprima questa colonna interromperà il layout di 3 colonne. Ci sono altre soluzioni?

codice (lo stesso del violino) HTML:

<div class="container" > 
    <div class="title"> 
     LONG STRINGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG 
    </div> 
    <div class="tags"> 
     <span class="place-tag" > Test </span> 
     <span class="place-tag"> Test </span> 
     <span class="place-tag"> Test </span> 
     <span class="place-tag"> Test </span> 
     <span class="place-tag"> Test </span> 
     <span class="place-tag"> Test </span> 
     <span class="place-tag"> Test </span> 
     <span class="place-tag"> Test </span> 
     <span class="place-tag"> Test </span> 
     <span class="place-tag"> Test </span> 
     <span class="place-tag"> Test </span> 
     <span class="place-tag"> Test </span> 
    </div> 
    <div style="background-color:blue" > 
     END 
    </div> 
</div> 

CSS:

.container{ 
    display: flex; 
    flex-wrap: no-wrap; 
    flex-direction: row; 
    justify-content: space-around; 
} 
.title{ 
    background-color:red; 
    flex-grow:1; 
    display:flex; 
    flex-wrap:wrap; 
} 
.place-tag{ 
    display:inline-block; 
} 


.tags{ 
    background-color:green; 
    flex-grow:1; 
    flex-shrink:1; 
    display:flex; 
    justify-content:flex-end; 
    flex-wrap:wrap; 
} 

Answer 1

È possibile utilizzare la proprietà overflow: hidden; sull'elemento .title e inserire il testo reale all'interno di un elemento figlio che ha text-overflow: ellipsis;

.container{ 
 
    display: flex; 
 
    flex-wrap: no-wrap; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 
} 
 
.title{ 
 
    background-color:red; 
 
    flex-grow:1; 
 
    display:flex; 
 
    overflow: hidden; 
 
    flex-wrap:wrap; 
 
} 
 
.title > span 
 
{ 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
.place-tag{ 
 
    display:inline-block; 
 
} 
 

 

 
.tags{ 
 
    background-color:green; 
 
    flex-grow:1; 
 
    flex-shrink:1; 
 
    display:flex; 
 
    justify-content:flex-end; 
 
    flex-wrap:wrap; 
 
}

<div class="container" > 
 
<div class="title"><span>LONG STRINGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</span></div> 
 
<div class="tags" > 
 
    <span class="place-tag" > Test </span> 
 
    <span class="place-tag"> Test </span> 
 
    <span class="place-tag"> Test </span> 
 
    <span class="place-tag"> Test </span> 
 
    <span class="place-tag"> Test </span> 
 
    <span class="place-tag"> Test </span> 
 
    <span class="place-tag"> Test </span> 
 
    <span class="place-tag"> Test </span> 
 
    <span class="place-tag"> Test </span> 
 
    <span class="place-tag"> Test </span> 
 
    <span class="place-tag"> Test </span> 
 
    <span class="place-tag"> Test </span> 
 
</div> 
 
<div style="background-color:blue" >END</div> 
 
</div>

Nizza informazioni sul testo-overflow: https://css-tricks.com/almanac/properties/t/text-overflow/