CSS flex: вырезать текст в контейнере, за которым всегда следует следующий элемент

Question

Я хочу, чтобы текст сжимался и обрезался внутри контейнера (без переполнения), но чтобы за ним всегда следовала встроенная ссылка, которая всегда является последним элементом в контейнере.

Это как далеко Я пришел: [https://jsfiddle.net/jamacoe/Lrtokvh2/4

Кто-нибудь, поделитесь своими знаниями, пожалуйста.

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>