Coder Social home page Coder Social logo

Comments (4)

Justineo avatar Justineo commented on July 17, 2024 1

Fixed in 0876b1e.

from vue-clamp.

zyjwsg avatar zyjwsg commented on July 17, 2024

@Justineo

据观察,

  1. 反向后文本前后可能会出现多余的宽度为 0 的 DOMRect,需按宽度过滤
  2. 结尾的标点符号(比如…)会产生和正常文本 top/bottom 一致的多余的 DOMRect,可按 top/bottom 值过滤
    如图:
    image

故按如下修改 getLines,简单测试下能够正常使用

getLines () {
  return new Set([...this.$refs.content.getClientRects()].filter(item => item.width > 0).map(rect => Math.round(rect.top))).size;
},

😄

from vue-clamp.

Justineo avatar Justineo commented on July 17, 2024

我感觉是不是不需要判断宽度为 0 了,直接看有多少不同的 top & bottom 就行了?

from vue-clamp.

zyjwsg avatar zyjwsg commented on July 17, 2024

我感觉是不是不需要判断宽度为 0 了,直接看有多少不同的 top & bottom 就行了?

👍
好像是可以只看 top、bottom,目前测下来没发现问题

测试结果:
edge、ie11、chrome 正常,
firefox getClientRects() 返回的宽度为 0 元素总是 [0] 元素,同时 top bottom 和真实文本第一行的 DOMRect 一致

单看实验现象,认为不同的 top bottom 的数量就是行数应该是可行的

from vue-clamp.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.