All geek questions in one place

Flex mesh elements with long text inside

I have a flexible 3-column layout, as you can see in this fiddle

Is there a way to tell the flex element an 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 will break the layout of 3 columns. Are there other solutions?

Code (of the same 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; }
+5
source share
2 answers

You can use the overflow: hidden; property overflow: hidden; in the .title element and put the actual text inside the child element with 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>

Good text overflow info: https://css-tricks.com/almanac/properties/t/text-overflow/

+3
source

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
+1
source

Source: https://habr.com/ru/post/1233710/

More articles:


All Articles