Flex grid elements with long text inside
You can use the overflow: hidden; property on the .title element and place the actual text inside a child element having 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>Nice information about text-overflow: https://css-tricks.com/almanac/properties/t/text-overflow/
You can even use "word-wrap:break-word", it worked for me:
word-wrap: break-word;
padding-top:30px;
padding-left:50px;
padding-right:50px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: normal