1

I want a text to shrink and be cut off within a container (no overflow), but to be always followed inline by a link that is always the last item in the container.

This is how far I have come: [https://jsfiddle.net/jamacoe/Lrtokvh2/4

Someone share your knowledge, please.

CSS

.outer {
    display: flex;
    flex-direction: column;

    height: 4em;

    font-size: 1em;
    border: 1px solid black;
    background-color: powderblue;
}
.inner {
}
.title {
    flex: 0 0 auto;
    font-weight: 600;
}   
.text {
    flex: 1 1 auto;
}
.more {
    flex: 0 0 auto;
}

HTML

<div class="outer">
    <div class="title">
        Title
    </div>
    <div class="inner">
        <span class="text">
            This is a text that can get pretty long. It should break within the box, but it should never exceed the bottom border of the
            outer container. If the space is too small, it should not overflow, but be cutted off. The following tailing link should always be visible at the
            end of the text.
            <span class="more">
                [...] <a href="#">more</a>
            </span>
        </span>
    </div>
</div>
jamacoe
  • 519
  • 4
  • 16
  • Is this what you want? This will prevent the overflow: https://jsfiddle.net/zgja05cw/ – Michael Benjamin Mar 16 '20 at 20:23
  • @Michael_B Thank you for your answer, but it is not really what I needed. You have put a min-height that let's the outer container grow. In my special case I have a box with a fixed height. Width and content are variable. So I want the end of the text to dissapear. But the 'more' link should always be the last thing in the box, right behind the main (cut off) text. – jamacoe Mar 16 '20 at 21:30
  • https://stackoverflow.com/q/33058004/3597276 – Michael Benjamin Mar 16 '20 at 21:49

0 Answers0