frondor / vue-line-clamp Goto Github PK

The line-height set by class gets overwritten by vue-line-clamp element style line-height (16px) in Firefox 64.0.2. Try your own codepen in Firefox: https://codepen.io/Frondor/pen/ypvPEQ.

Yes, I'm aware that i can use '!important' for this issue, but I'd rather not do that.

P.S.: thanks for this plugin! Good work!

Setup a vue project initially using vue-cli

Screen is blank in IE11 and the above error is seen. This happens when importing vue-line-clamp into a component (.vue file) and calling Vue.use(lineClamp, {}) there. However, when importing it into my main.js file (and I'm guess any .js file), there is no issue. For some reason it seems that the polyfill for Object.assign does not get used unless importing into a js file. Could this be an issue with vue-loader or babel-loader?

So I wasn't totally happy with the default fallback behavior of this library. Specifically, I wanted ellipsis. I went ahead and made a local fork that simply replaced these lines

lineClamp(el, { lineCount: lines });

from https://www.npmjs.com/package/line-clamp

This seemed like too disruptive of a change to push upstream. There are several different ways to do do line clamping on non-webkit browsers even without considering word splitting issues. Different projects may have different requirements and I don't want to force my preferences on everyone.

However, if we added a new "fallbackFunc" option, then we can let users override the default behavior with one of their own construction. I went ahead and modified my fork to do this.

Now, I can initialize this library like so

import Vue from 'vue'
import VueLineClamp from 'vue-line-clamp'
import lineClamp from 'line-clamp'

Vue.use(VueLineClamp, {
  fallbackFunc: (el, bindings, lines) => {
    lineClamp(el, { lineCount: lines })
  }
})

and get the behavior I'm looking for.

If you like the idea, I can submit my fork as a PR.

The title...

I've worked around this in my code-base, but i was slightly surprised by one last behavior of this lib. I had a div that needed to be clamped in some cases and not clamped in others. I expected that if I passed 0 (or at least null or undefined), that this lib would leave my div unchanged. However, to my surprise, there was no way to prevent this lib from modifying the element. AFAIK, vue doesn't have a way to conditionally add an attribute to an element in a template, so i had to conditionally render 2 different versions of the div. one with this attribute and one without.

TBH, there are tradeoffs either way and i'm not convinced that this suggestion is a good one, but i figured i'd let you know about the pain point.

The component works fine for LTR text, but shows many issues for RTL text, as shown in the examples below.

Example 1: text clamps correctly to 3 lines on LTR text

Example 2: RTL text not clamping to 3 lines

Example 3: another RTL text is overlapped

Do you have any ideas about what's going on? When I start disabling some of the CSS properties added by the component (or when I remove the component at all), the text looks good.
Any help is appreciated.

I want to make a 'Show more' button but don't want it to show if the text not clamped. How to make this happen ?

Hello, I'm using a custom font called Inter UI and line clamping doesn't work properly.

Screenshot

• I'm running Vue via webpacker gem with Ruby on Rails
• I'm loading the font via @import url("https://rsms.me/inter/inter-ui.css"); in my SCSS in Rails asset pipeline
• I'm using line clamp like this: <p class="post__data__content" v-line-clamp="{ lines: 1, text: post.content }"></p>

Am I doing something wrong, or is there any fix for this behaviour? Thanks

i don't see any of the fallbackFunc stuff in there

Hello,
It is not working with FF 64.0.2 (64 bits), any workaround for that issue ?

Thanks,

Whole page is white when using in vuejs web page

Hi! I just want to ask how to know if the content reaches the maximum line being set.
Let say for example I set the maximum to 5 lines and the text content has only 1 line. I wanted to enable clamping if it reaches more than 5 lines.

The content can be html or text.

  <div v-line-clamp="clampLines" style="word-break:normal!important;">
                        <span v-html="text"></span>
                    </div>
                    <v-divider v-if="clampLines"></v-divider>
                    <v-btn @click="toggleLines" text small block color="primary" class="font-weight-bold">
                        <template v-if="clampLines">Read More</template>
                        <template v-if="!clampLines">Read Less</template>
                    </v-btn>

a little help would be appreciated. Thanks!

how to prevent breaking a word when the new line happens?

Allow to custom the text-overflow property, please.

I was happy nesting divs this way (container contains one div that contains other elements) works with Firefox and Chrome, but found out it doesn't in Safari.
https://codepen.io/panfanky/pen/dyNLYNJ

Another way - when the container just contains other elements - doesn't seem to work in any browser.
https://codepen.io/panfanky/pen/ZELZbaO

Here's a slight modification of your example code-pen to illustrate the problem.

https://codepen.io/zevdg/pen/EQWZJy

How do we deal with this?Please comment

Hey man!
You have created an awesome tool, that's exactly what I was looking for, since none of other solutions worked nicely with Vue.js.
But is value of v-line-clamp reactive? If I change the value of variable, that I assign to v-line-clamp, would number of lines in p change accordingly?

Thanks for the library!
I want to add read more button behavior that will only be shown if the overflow occurred.
in order to do that i need some simple indication that the paragraph is collapsed.

Long words don't break lines.

Example

<template>
  <p class="text" v-line-clamp:16="7">asdadsadsadsadsadasdasdasdasdasdasdasadsadsadsadsadasdasdasdasadsadsadsadasdasdasdasdasadsadsadsadasdasdasadsadsadasdasadsadsadsadasdasdasadsadasdasadsadasdasdasadsadasdasadsadsadasdasdasadsadasdasdasadsadsadsasa</p>
</template>

Causes

The css "text-overflow: ellipsis" does not have any affect.