Multiple lines text-overflow with unshrinkable item (flexbox)

Question

This is what I am trying to do ↓

And this is what I have (basically, I will no achieve text-overlfow like that, but at least it'll be something. Unfortunately even that doesn't work):

.parent {
  max-height: 40px;
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: grey;
}
  
.long {
  flex: 0 1 auto;
}

.short {
  flex: 1 0 auto;
}

<div class="parent">
  <span class="long">Some long long long long long really long text</span>
  <span class="short">short text</span>
</div>

doesn't look like a flex job, you probably have to truncate the long text via js. — G-Cyrillus, Oct 15 '20 at 17:47

score 0 · Answer 1 · answered Oct 15 '20 at 18:10

I don't think so theirs any need to use flexboxes.
If you just want truncatinated text, you can do that using Javascript like this.

HTML code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS truncates a string</title>
</head>
<body>
</body>
</html>

JavaScript code

text_truncate = function(str, length, ending) {
    if (length == null) {
      length = 100;
    }
    if (ending == null) {
      ending = '...';
    }
    if (str.length > length) {
      return str.substring(0, length - ending.length) + ending;
    } else {
      return str;
    }
  };
console.log(text_truncate('We are doing JS string exercises.'))
console.log(text_truncate('We are doing JS string exercises.',19))
console.log(text_truncate('We are doing JS string exercises.',15,'!!'))

Sample output

We are doing JS string exercises.
We are doing JS ...
We are doing !!

ali nazari · Answer 2 · 2020-10-15T18:41:49.273

try this. you will have same result.

.parent {
  width: 250px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: grey;
}

.long {
  text-indent: 25px;
}

.short {
  color: black;
}

<div class="parent">
  <span class="long">Some long long long long  <br /> long really long text...<span class="short">short text</span></span>
  

</div>

Tanim · Answer 3 · 2020-10-15T18:55:13.080

You used max-height: 40px; so that's why your content is overflowing from .parent after 40px

If you want your background-color to wrap the whole content, remove max-height: 40px; that would be all.

And if you want that space at the starting, use CSS pseudo-element ::first-letter as it is in the example below or you can use text-indent: 20px; as well

<style>
  .parent {
    /* max-height: 40px; */
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    background-color: grey;
    color: #fff
  }

  .long {
    flex: 0 1 auto;
    font-size: 16px;
    /*text-indent: 25px; you can use this too*/ 
  }

  .long::first-letter { /*if you use text-indent, remove this*/
    margin-left: 20px;
  }

  .short {
    flex: 1 0 auto;
    font-size: 14px;
    text-align: right;
  }
</style>


<div class="parent">
  <span class="long">Some long long long long long really long text</span>
  <span class="short">short text</span>
</div>

And if you want all the texts to be in one line, like your example, you should wrap all the texts in one element, and wrap the short-text with an inline element like span or a as it is in the example below-

<style>
  .parent {
    /* max-height: 40px; */
    padding: 0 5px;
    width: 200px;
    background-color: grey;
    color: #fff
  }

  .long {
    font-size: 16px;
  }

  .long::first-letter {
    margin-left: 30px;
  }

  .short {
    font-size: 14px;
    float: right;
    color: #ddd
  }
</style>


<div class="parent">
  <p class="long">Some long long long long long really long text ...<span class="short">short text</span></p>
</div>

score 0 · Accepted Answer · answered Oct 15 '20 at 18:57

My earlier comment turned in an answer with an example to demonstrate it:

doesn't look like a flex job, you probably have to truncate the long text via js

here is an example inspired from : Smart way to truncate long strings ( read answers to go further)

// set your var 
let lgtxt = document.querySelector(".long");
let n = 40;

//function to do the job 
function truncate(str, n) {
  return (str.length > n) ? str.substr(0, n - 1) + '...' : str;
}


//fire it once content is loaded
window.onload = function() {
  let str = lgtxt.textContent;
  lgtxt.textContent = truncate(str, n);
};

.parent {
  max-height: 40px;
  width: 200px;
  background-color: grey;
  text-align:justify;
  text-align-last:justify;
  padding:0 0.25em;
}

.short {
  color: lightgray
}

<div class="parent">
  <span class="long">Some long long long long longlong long long longlong long long long really long text</span>
  <span class="short">short text</span>
</div>

Flex will not help you here :(

Oh thank you! The reason why I was trying to use `flex` it's `flex-shrink` property (set that property with 0 for `.short`). But I guess your solution is one of the best even if it's not that accurate how I wish for. I'll wait a bit and if there won't be better solution I'll mark your comment as one that solved me problem. — eazynickname, Oct 15 '20 at 20:10

Multiple lines text-overflow with unshrinkable item (flexbox)

4 Answers4