justineo / vue-clamp

Clamping multiline text with ease.

<vue-clamp>

Clamping multiline text with ease.

See more in our docs & demo.

vue-clamp's Issues

webpack 打包后 里面还有es6的语法

I dont see how to toggle between the full text view and the compact view

I figured clicking on the ellipsis would do it or there'd be an option for inserting a toggle but I dont see either. Here's a [code sandbox]

Could not find a declaration file for module 'vue-clamp'

I get this error when trying to import (import VClamp from 'vue-clamp';)

TS7016: Could not find a declaration file for module 'vue-clamp'. 'C:/Users/csl/Documents/Arbejde/ERST/erst/virksomhedsguiden/frontend-components/node_modules/vue-clamp/dist/vue-clamp.js' implicitly has an 'any' type.   Try npm install @types/vue-clamp if it exists or add a new declaration (.d.ts) file containing declare module 'vue-clamp';

I have added transpileDependencies: ['vue-clamp', 'resize-detector'] to my vue.config.js.

如果可以支持html内容的话，截断的思路要怎么实现

Not possible to use html in v-clamp

I think this is a very wanted functionality wich can be added by using the following package: https://www.npmjs.com/package/html-truncate

I don't think it will add a lot of complexity. Please consider adding, it would be very appreciated. :)

max-height 和 line-height 的冲突问题

如果文本设置的行高小于字体的 acsender/desender height （比如思源黑 line-height < 1.5），那么走 max-height 分支判断 isOverflow 时始终为 true，导致最后只显示 ...。

vue-clamp/src/components/Clamp.js

Lines 141 to 145 in c36f45f

	if (this.maxHeight) {
	if (this.$el.scrollHeight > this.$el.offsetHeight) {
	return true
	}
	}

现在文本无法换行显示，文本为什么不可以加个div包裹？

现在文本无法换行显示， 可以自己选择加个div包裹吗? 因为我是用v-html 让文本换行显示.

Access in "after" slot to isClamped

I write some text after the text only if is clamped.

You can add some attribute to know if the text was processed( for computed isClamped) or not?

Example:

Hello -> never clamped
Hello aga... -> clamped

works very slowly in the Google chrome

I use vue-clamp in a table.
it works very slowly in the browser, but it works well in the Firefox.

若返回的数据含有中英文，则不支持截取省略显示

比如返回的数据为：测1111122222wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
期待作者修复这个bug哈

这个支持html渲染形式的内容么

Support for Vue 3.0

Is there any plan to support for vue 3.0?

Support for v-html

Another request for v-html support.

Not working with Nuxt on IE11

Hello vue clamp not working with nuxt on IE11, can anyone solve this problem? or it just mine problem?

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

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>

Vue-Clamp and slots

I am trying to get this working with a slot, but can't seem to get it working. When I load the page, the content is missing, but there are no errors. I didn't see examples, so I tried to follow what you had in the App.vue in the repo. Here is what I have.

Communications.vue
I loop through and call the instances of communications

<article v-for="communication in communications">
   <CommunicationInstance>
       <img slot="image":src="require('../assets/images/' + communication.image)" />
       <i slot="date">{{ communication.date }}</i>
       <div slot="content">{{ communication.content }}</div>
   </CommunicationInstance>
</article>

And then in the CommunicationsInstance.vue I have for the part that I was vue-clamp to be used:

            <div class="communication-instance-content">
                <v-clamp class="communication-instance-content" :max-lines="lines" auto-resize>
                    <slot name="content"></slot>
                </v-clamp>
            </div>

Then within the script tag I have

import VClamp from 'vue-clamp'
export default {
    data() {
        return {
            lines: 3,
            expanded: false
        }
    },
    components: {
        VClamp
    }
    
}

And in the vue.config.js file I have:

module.exports = {
  transpileDependencies: ['vue-clamp', 'resize-detector']
};

What am I doing wrong here?

Block of unknown sizes

Hello!
How can I use your component if the block of text is stretchable? I don't know its height or width.

为什么style="box-shadow: transparent 0px 0px;"会影响getClientRects的值?

这个组件真的很有用, 但是我的项目是Angular的, 所以我学习了一下源码的实现. 但是发现自己的getClientRects返回值不对, 对比了好久发现是style="box-shadow: transparent 0px 0px;"的作用, 但是不知道这底层的原因是什么? 这两者之间有什么影响?
希望大神指教.

[BUG][兼容性] 在 direction == 'rtl' 的情况下，获取行数错误

异常浏览器：
Firefox

现象：
切换为从右至左布局后，触发组件更新，将显示错误的折叠文本

正常样式：

异常样式：

复现步奏：

1. 设置父容器样式 direction: "rtl";
2. 触发 v-clamp 更新（v-if 重新渲染；若监听size变化，可调整窗口大小；等）

问题分析：
查看源码发现判断 isOverflow 方法中使用了dom 元素的 getClientRects() 方法判断行数，该方法存在兼容性问题

如图 Firefox：

对比 Chrome：

Doesn't work in <th>

Even with an enclosing DIV block, the single-line text is not shortened. the SPAN-Block runs longer than the TH-Block

各方面都符合需求，但內容能否傳入 html 格式？

各方面都符合需求，但內容能否傳入 html 格式？ 因為用戶有主動換行的需求..

Causes endless loop in IE10

I had a issue in IE10 with high cpu usage and flickering elements so did some profiling of the app and noticed a endless loop in vue-clamp.

I cannot fully say what causes the problem because IE developer tools are outright horrible but those are my findings:

• element.resize gets triggered, handler calls vue-clamp to update
• vue-clamp updates text in DOM
• DOMSubtreeModified gets triggered, handler calls vue-clamp to update
• vue-clamp updates text in DOM
• DOMSubtreeModified gets triggered, handler calls vue-clamp to update
• and so on ...

Maybe the real problem lies with resize-detector by not properly detecting resize loops.

Anyway, here is my workaround:
Add resize-observer-polyfill package

import ResizeObserver from "resize-observer-polyfill"

if (!("ResizeObserver" in window)) {
  window.ResizeObserver = ResizeObserver
}

Doesn't work in nuxtjs

[Vue warn]: Unknown custom element: <vue-clamp> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Card> at components/page/card.vue
       <Pages/Lang/index.vue> at pages/_lang/index.vue
         <Nuxt>
           <VMain>
             <VApp>
               <Layouts/default.vue> at layouts/default.vue
                 <Root>

Clamp tags!

This repo is so great. Thanks to your work! We found it because there is a tags-clamping feature in our product. Since we haven't found any vue component supports tags-clamping, we reimplemented vue-clamp. I hope our codes could be merged into master branch so I submit this issue.

Let me explain the main changes:

1. Manipulate DOM nodes directly only works for simple text and will cause tags state getting into a mess, so we create invisible DOM nodes for clamped text/tags offset calculation.
2. Due to 1, no more applyChange method, we only need to design a proper workflow in Vue style for offset updating. Then just let Vue handle the DOM updating!
3. Due to 1 again, this logic can also work in React or other VDOM libraries. I have made a reference to ant-design in utils.js.

Fork repo: https://github.com/boyuai/vue-clamp
Demo: https://boyuai.github.io/vue-clamp/demo/

Doesn't work with v-html

in my case, i want to render raw html with vue-clamp. I write two type code

In v-clamp tag
<v-clamp autoresize :max-lines="2" v-html="item.content"></v-clamp>

Add span inside v-clamp tag
<v-clamp autoresize :max-lines="2"> <span v-html="item.content></span> </v-clamp>

and vue-clamp plugin not working with v-html.

Thanks

切换

您好，超出规定行数，展开收起超出文字，我用slot插槽没起作用，想请问一下该怎么解决一下啊

auto resize failed after zoomed in

I have used transpileDependencies: ['resize-detector']. It seems that auto resize failed after zoomed in. How could I fix this problem?

New line problem

Hi

And thanks for a greate component.

I have this:

               <div class="font-weight-bold">{{ item.user.username }}</div>
               <div class="comment-text">
                    <v-clamp autoresize :max-lines="3">
                        {{ item.text }}
                        <button v-if="expanded || clamped"
                                slot="after"
                                slot-scope="{ toggle, expanded, clamped }"
                                class="comment-toggle"
                                @click="toggle">
                            <template v-if="clamped">
                                {{ $t('ShowMore') }}
                            </template>
                            <template v-if="expanded">
                                {{ $t('ShowLess') }}
                            </template>
                        </button>
                    </v-clamp>
                </div>

And item.text = "Hello\n\nMy name is...\n and i live in..."

The problem is thet all the text is on the same line. Then i try this css:
.comment-text span span { white-space: pre-line; }

Then i first recive a empty line, then i se "Hello" and the third line contains, "... Read more".

How can i craete a new line when the text contains \n? Or remove the first line?

Result:

But should be:

v-html in vue-clamp

I see that this has been asked before in #13 and #14 but I don't see that there was an answer. I would like to know if there is a way to render html inside vue-clamp. I tried the same things as ChunAllen and they don't work, so if there is another way, please let me know.

截断文本展开收起时能够加入缓动效果吗？现在展开收起太突兀了

ResizeObserver loop limit exceeded

前提： autoresize: true
条件：页面缩放是会导致该异常
原因：如果在一个动画帧内，ResizeObserver不能处理所有的observations，就会触发这个ResizeObserver loop limit exceeded
解决：引入时对update节流处理

import Vue from 'vue'
import vueClamp from 'vue-clamp'

// 页面缩放响应时略显卡顿
const fixVueClampErr = (comp) => {
    const oldUpdate= table.methods.update
    comp.methods.update= function () {
        window.requestAnimationFrame(oldUpdate.bind(this))
    }
}

fixVueClampErr (vueClamp )
Vue.component('v-clamp', vueClamp)

望大公 有更好的方法进行优化

Produces Invalid HTML if wrapped in a <p> tag - source of hydration issues with SSR

Using v-clamp inside a <p> tag will generate invalid HTML as v-clamp will put a div wrapper around the text.
In NUXT this will lead to hydration problems with SSR rendering even when the plugin is configured to ssr: false.

Why not use another span? Or add an option to choose the wrapper tag?

getLines method may run wrong after compiled

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36

Steps to reproduce:

Use vue-clamp with content which makes this.$refs.content.getClientRects() return a list of length more than 1

Actual results:

The getLines method in source code returns correct result. But it returns wrong result after babel compiled.

Expected results:

Get correct number of lines so that to be able to calculate correctly

Suggestion:

Babel compiles the [...array] into [].concat(array).

The concat method creates a new array consisting of the elements in the object on which it is called, followed in order by, for each argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array). It does not recurse into nested array arguments. more description

However this.$refs.content.getClientRects() returns a DomRectList(on Chrome) rather than a pure array. Then concat method views it as a non-array argument and [].concat(DomRectList) is going to be return [DomRectList] and its length is going to be 1 forever which is not our expected result.

Therefore, I suggest replacingspread syntax with simple for-loop in getLines method to make sure that the iterable object converts into array correctly.

希望可以以任何形式把“是否省略”的状态值给传出来

有了这个“是否省略”的状态值，可以实现这样的需求：

• 已被省略的文本可以加上title属性显示完整内容，未被省略的文本则不需要加title属性
• 已被忽略的文本末尾可以加上按钮来触发展开完整文本内容，而未被忽略的文本末尾就不需要有这个按钮

vue-clamp not work with el-tabs in element-ui

I am using vue-clamp with tab component in element-ui, like following,

<el-tabs>
      <el-tab-pane label="Tab 1">
        a
      </el-tab-pane>
      <el-tab-pane label="Tab 2">
        <v-clamp :max-lines="3">
          bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb
        </v-clamp>
      </el-tab-pane>
      <el-tab-pane label="Tab 3">
        c
      </el-tab-pane>
    </el-tabs>

if vue-clamp is placed in tab1, vue-clamp will be loaded and calculate the height when page initializes at first. But if vue-clamp is placed in tab2, it will not work and text in vue-clamp is wholly displayed.

Autoresize doesn't work as intended in a flex container

When put in a flex container, everything seems to work correctly but one thing:

The content clamps correctly when the size is being reduced, but not the other way around: it stays clamped when the size of the flex container is increasing, even if there is now enough space for the content to display.

To reproduce:

Here is a simple example, just try to resize your screen downwards, then upwards:

    <div style="display: flex;">
      <v-clamp
        autoresize
        :max-lines="1"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      </v-clamp>
    </div>

Tested in Chrome 79.0.3945.130 and Safari 13.0.4.

TypeError: (this.$slots.default || []).filter is not a function

Hi I'm using vueJs3 and I hit below error when I use the this lib. any idea?

Clamp.js?3f87:159
Uncaught (in promise) TypeError: (this.$slots.default || []).filter is not a function
at Proxy.getText (Clamp.js?3f87:159)
at Proxy.data (Clamp.js?3f87:25)
at resolveData (runtime-core.esm-bundler.js?5c40:5771)
at applyOptions (runtime-core.esm-bundler.js?5c40:5576)
at finishComponentSetup (runtime-core.esm-bundler.js?5c40:6339)
at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6273)
at setupComponent (runtime-core.esm-bundler.js?5c40:6213)
at mountComponent (runtime-core.esm-bundler.js?5c40:3969)
at processComponent (runtime-core.esm-bundler.js?5c40:3945)
at patch (runtime-core.esm-bundler.js?5c40:3556)

你的提问没有任何信息，无法提供帮助。请提供最小可复现的场景。

.

Prevent cutting the last word

Is there a method to avoid cutting words in the middle, similar to what this library accomplishes: vue-read-more-truncate? As shown in the image below, the word focused is truncated to fo....

How to use vue-clamp in vite

How to use vue-clamp in vite？

Implement v-clamp with v-html

I'm currently using Vuetify and Vue-Clamp
The body contains html elements such as span, <b></b>, <p></p> etc...

I tried

<div class="caption mb-3">
    <v-clamp autoresize :max-lines="10" v-html="body"></v-clamp>
</div>

and

<v-clamp autoresize :max-lines="10">
   <div class="caption mb-3" v-html="body"></body>
</v-clamp>

But both approach doesn't work

Change text in button when expanded

Is there a way to change the text of the button that expands the text so that it could read something like Read More and then Read Less when expanded?

Doesnt render on serverside

Hello, Firstly this package one of the best clamp packages ever seen but there is only one problem. Unfortunately, not working with server-side projects like Nuxt js and for this reason, does not render on the server-side. But also this is a big problem for SEO.

Also, you have 1 pull request about this issue :) Can you do this for us?

Why transpile?

Why isn't the package already in ES5?

Support for middle ellipsis would be staggering

There are some libraries for middle ellipsis for Vue 2, would be lit if vue-clamp would support middle ellipsis as well.

• https://github.com/hyjiacan/vue-ellipsis (demo)
• https://github.com/tardigrada777/vue-text-middle-ellipsis

存数字无法换行，只有碰到汉字才会换行