Skip to content
New issue

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

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

Already on GitHub? # 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

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

No branches or pull requests

2 participants