Flex grid elements with long text inside

Question

I have a flex layout of 3 columns as you can see in this fiddle

There is any way to tell to a flex element to ellipse or break this long text? As you can see in the first column i have a long word, if you resize the preview window this column is going to break the 3 columns layout. There are other solutions?

Code(same of the fiddle) 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;
}

This may help you: http://stackoverflow.com/a/33061059/3597276 — Michael Benjamin, Oct 14 '15 at 15:08
Would `word-break: break-all;` be an option ? You would just need to add this to your `.title` class. — DavidDomain, Oct 14 '15 at 15:35

score 3 · Accepted Answer · answered Oct 14 '15 at 14:48

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/

Ameena sana · Answer 2 · 2019-01-10T04:42:05.557

2

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

edited Jan 10 '19 at 04:42

answered Jan 10 '19 at 04:29

Ameena sana

81
3

Flex grid elements with long text inside

2 Answers2