內有 flexbox 的線夾

Question

我正在嘗試有一個容器，它在 2 行之后具有線夾，並且內部還有一個 flexbox。 這是我想出的代碼。 可悲的是，-webkit-box 中的 flexbox 似乎不起作用。

 .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>

我希望它看起來像的示例（不能這樣工作，因為文本的長度未知）。 我不想剪掉文字，因為字母可以有不同的大小，作者姓名也可以。

 .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>

這有可能嗎？

Answer 1

不完全確定我是否理解了這個問題，但是您可以使用overflow-y: scroll;在textContainer上設置一個固定高度。 然后，我將text的line-height設置為textContainer高度的一半，因此只顯示兩行文本。

 .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>