line-clamp with flexbox inside

Question

I'm trying to have a container which has line-clamping after 2 lines and also a flexbox inside. This is the code I came up with. Sadly a flexbox inside a -webkit-box doesn't seem to work.

 .textContainer { width: 300px; background: lightgreen; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; line-clamp: 2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.textContainer > div { display: flex; }.text, .author { align-self: flex-end; }.author { flex-shrink: 0; margin-left: 20px; }

 <div class="textContainer"> <div> <span class="text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </span> <span class="author">Foo Bar</span> </div> </div>

Example of what I want it to look like (doesn't work like this, because the text has an unkown length). I don't want to cut the text, because letters can have a different size and so can the author name.

 .textContainer { width: 300px; background: lightgreen; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; line-clamp: 2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

 <div class="textContainer"> <div> <span class="text"> Lorem ipsum dolor sit amet, consetetur sa dipsc ing elitr, sed diam nonumy... </span> <span class="author">Foo Bar</span> </div> </div>

Is this somehow possible?

Answer 1

Not entirely sure if I understood the question, but you can set a fixed height on textContainer with overflow-y: scroll; I then set your line-height for text to be half of the height of textContainer so only two lines of text are being displayed.

 .textContainer { width: 300px; height: 35px; overflow-y: scroll; background: lightgreen; display: -webkit-box; text-overflow: ellipsis; line-clamp: 2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.textContainer > div { display: flex; }.text, .author { line-height: 17.5px; }.author { flex-shrink: 0; margin-left: 20px; }

 <div class="textContainer"> <div> <span class="text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </span> <span class="author">Foo Bar</span> </div> </div>