Justineo / vue-clamp

Clamping multiline text with ease.
https://vue-clamp.vercel.app
MIT License
699 stars 89 forks source link

Doesn't work correctly when there is block element in `after` slot #35

Open lana-k opened 4 years ago

lana-k commented 4 years ago

I need a clamped text with 'read more' button displayed as block element (like this)

So, when I use block element in after slot the vue-clamp hides more lines than needed.

    <v-clamp
      :max-lines="3"
      autoresize
    >
      {{ text }}
      <template #after="{ toggle, expanded, clamped }">
        <div
          v-if="expanded || clamped"
          class="toggle btn btn-sm"
          @click="toggle"
        >
          Read more
        </div>
      </template>
    </v-clamp>
Justineo commented 4 years ago

It is expected in current version. You can move the block level element outside. In future versions we may offer more flexibility.

lana-k commented 4 years ago

@Justineo it's not obvious, because it's said in the doc:

after Slot scope: Same as before. Content displayed after the clamped text. Can contain anything.

Please, change it to

after Slot scope: Same as before. Content displayed after the clamped text. Can contain inline-level element.

It should be said explicitly that the inline element is expected.

helsonxiao commented 3 years ago

This fork may work as you expect? https://boyuai.github.io/vue-clamp/demo/ image