Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css 设置多行文本省略 无效 #121

Open
zstings opened this issue Dec 3, 2024 · 1 comment
Open

css 设置多行文本省略 无效 #121

zstings opened this issue Dec 3, 2024 · 1 comment

Comments

@zstings
Copy link

zstings commented Dec 3, 2024

Steps To Reproduce

Playground for https://play.vuejs.org

Environment

  • modern-screenshot: [4.5.5]
  • Browser: [edge 131.0.2903.70]
@zstings
Copy link
Author

zstings commented Dec 3, 2024

我修改了编译后的源码,实现了这个功能。给作者大佬参考一下。
在copyCssStyles函数中,对style这个变量做一个判断:

function copyCssStyles(node, cloned, isRoot, context) {
  ...
  const style = getDiffStyle(computedStyle, defaultStyle, includeStyleProperties);
  /**
   * css 多行省略识别修复
   * 问题的原因:getComputedStyle 读取到的display属性,在 display 为 -webkit-box 时识别为flow-root
   * 先决条件:-webkit-box-orient: vertical -webkit-line-clamp: 数字
   */
  if (style.get('-webkit-box-orient')?.[0] == 'vertical' && style.get('-webkit-line-clamp')?.[0] >= 0 && style.has('display')) {
    style.set('display', ['-webkit-box', ''])
  }
  ...
}

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants