Use the first non-empty text node for getting the line count.

[danielschwab]

As far as I can see this is needed to have a block node after the clamped text, like this:

<v-clamp autoresize :max-lines="1">
    {{ text }}
    <button
            v-if="expanded || clamped"
            slot="after"
            slot-scope="{ toggle, expanded, clamped }"
            class="d-block"
            @click="toggle"
    >
        {{ expanded ? 'show less' : 'show more' }}
    </button>
</v-clamp>

[Justineo]

Can you elaborate on what is this PR trying to fix? The code you provide seems to be working as expected to me.

[arnaudvalle]

I've seen the same problem myself and I think the problem Daniel is trying to fix is that if your after slot (a button in most cases) has a display: block, then it would currently be taken into account when calculating the number of lines you requested via max-lines (so if you do :max-lines="4" you'd most likely just get 3 lines + the button).

By using the text reference and not the content one, it only calculates the number of lines from the actual text content that was added in the default slot which seems better (and from what I've seen works with both inline-block and block for the after slot).

[danielschwab]

I want to accomplish a single line of text in the clamped state and the toggle button should always stay on a seperate line after the text. So the issue which was mentioned by @arnaudvalle is exactly what does prevent this version.

[Justineo]

I think if the toggle button has display: block on it, you'd better move it out of the <vue-clamp> component and line counters won't take it into account. Now that a new clampchange event is supported so that you can access clamp state outside the scoped slot as well.