Skip to content

剪藏知乎遇到链接会换行 #14400

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

Open
3 tasks done
Tracked by #14775
Jiangshuon opened this issue Mar 19, 2025 · 29 comments
Open
3 tasks done
Tracked by #14775

剪藏知乎遇到链接会换行 #14400

Jiangshuon opened this issue Mar 19, 2025 · 29 comments

Comments

@Jiangshuon
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Can the issue be reproduced with the default theme (daylight/midnight)?

  • I was able to reproduce the issue with the default theme

Could the issue be due to extensions?

  • I've ruled out the possibility that the extension is causing the problem.

Describe the problem

Image

Image

Expected result

。。

Screenshot or screen recording presentation

No response

Version environment

- Version: 最新
- Operating System: win11
- Browser (if used):

Log file

。。

More information

No response

@TCOTC
Copy link
Contributor

TCOTC commented Mar 19, 2025

https://www.zhihu.com/question/621921351/answer/3216949706

截图看一下剪藏拓展的实验性选项

@Jiangshuon
Copy link
Author

哦哦,是那个选项的问题,关了就好了,不过印象中我没有主动打开过

@TCOTC
Copy link
Contributor

TCOTC commented Mar 19, 2025

截图看看是什么选项

@Jiangshuon
Copy link
Author

span那个选项

@88250 88250 self-assigned this Mar 19, 2025
@TCOTC
Copy link
Contributor

TCOTC commented Mar 20, 2025

Sorry, something went wrong.

@TCOTC
Copy link
Contributor

TCOTC commented Mar 20, 2025

Sorry, something went wrong.

@ruin1990
Copy link
Contributor

ruin1990 commented Mar 20, 2025

Image
正好是个span,然后继承了p的white-space: normal;以及.rich_media_content * word-wrap: break-word !important;
实际渲染没换行
这个逻辑我刚才查阅资料和问了一下AI

排查 overflow 设置
若父级有 overflow: hidden,可能隐藏换行效果。
检查是否有 text-overflow: ellipsis 截断文本。

重新确认了下样式,可是样式是灰的,去掉这部分也没有换行
Image

@88250 88250 removed their assignment Mar 20, 2025
@88250
Copy link
Member

88250 commented Mar 20, 2025

@TCOTC
Copy link
Contributor

TCOTC commented Mar 20, 2025

回帖里的书名号前面那个换行是正常的

@88250
Copy link
Member

88250 commented Mar 20, 2025

回帖里的书名号前面那个换行是正常的

也就是说没有问题?

@TCOTC
Copy link
Contributor

TCOTC commented Mar 20, 2025

Image

@88250
Copy link
Member

88250 commented Mar 20, 2025

明白了

@88250
Copy link
Member

88250 commented Mar 20, 2025

可能和 #14400 (comment) 这个类似吧

@ruin1990 你再看看这个例子是否有共同点?

@ruin1990
Copy link
Contributor

ruin1990 commented Mar 25, 2025

Image

@TCOTC 请问下,这个测试网页在哪,好像不是https://mp.weixin.qq.com/s/Ie3gq3k81c5B-L7uH2h9PQ
原文里应该楼主只给了对应的html段,不过style没有完整的,无法分析
如果是提供文章链接的地方(比如同一个公众号),应该是同一个问题@88250

这里我想知道究竟是啥style覆盖了span的换行style

@TCOTC
Copy link
Contributor

TCOTC commented Mar 25, 2025

@ruin1990
Copy link
Contributor

ruin1990 commented Mar 26, 2025

好的感谢提供,看了下最终的计算样式,display:inline
但是我和以前span换行问题的网页对比,
看起来是一样的样式,为什么结果表现一个span有换行,一个没有,我还需要再看看

@ruin1990
Copy link
Contributor

似乎依赖于非tag样式里的自然换行符(\n)

@88250
Copy link
Member

88250 commented Apr 7, 2025

有需要我这边支持的地方吗?

@ruin1990
Copy link
Contributor

ruin1990 commented Apr 9, 2025

有需要我这边支持的地方吗?

嗯,这个没发现换行和不换行的样式差异在哪。就没法添加逻辑判断是否换行

@88250
Copy link
Member

88250 commented Apr 9, 2025

@Vanessa219 抽空帮看看这个问题

@Vanessa219
Copy link
Member

span 一般都不换行,https://www.bilibili.com/opus/465490977904921957 中的换行只和 white-space: pre-wrap; 这个相关,https://mp.weixin.qq.com/s/M1f0tfw_pAIY8RwsLu12lA 中的
word-wrap: break-word 并不会导致换行。

@ruin1990
Copy link
Contributor

ruin1990 commented Apr 10, 2025

@Vanessa219 您好,我有个疑惑就是我如果手动修改网页样式,把 https://mp.weixin.qq.com/s/M1f0tfw_pAIY8RwsLu12lA 中的样式调整成和 https://www.bilibili.com/opus/465490977904921957 一样,也并没有换行。
会不会也和原始网页中有\n有关,如果有pre-wrap或者pre节点的时候换行依赖于\r\n?
Image

所以我又修改了下原文,如果在对应span节点后手动增加一些换行符(不是<br>,是\r\n),反而能换行了
Image

span 一般都不换行,https://www.bilibili.com/opus/465490977904921957 中的换行只和 white-space: pre-wrap; 这个相关,https://mp.weixin.qq.com/s/M1f0tfw_pAIY8RwsLu12lA 中的 word-wrap: break-word 并不会导致换行。

@Vanessa219
Copy link
Member

可以参考一下 https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

@ruin1990
Copy link
Contributor

ruin1990 commented Apr 10, 2025

感谢提供的资料,看来和换行符也有关系
那可能需要根据样式批量合并换行符以及替换为<br>才能正确地识别到span的换行

换行符 空格和制表符 文本换行 行末空格 行末的其他空白分隔符
normal 合并 合并 换行 移除 挂起
nowrap 合并 合并 不换行 移除 挂起
pre 保留 保留 不换行 保留 不换行
pre-wrap 保留 保留 换行 挂起 挂起
pre-line 保留 合并 换行 移除 挂起
break-spaces 保留 保留 换行 换行 换行

@88250
Copy link
Member

88250 commented Apr 10, 2025

好复杂,具体需要做些什么?

@ruin1990
Copy link
Contributor

ruin1990 commented Apr 11, 2025

我大致思路是这样的:

  1. white-space: pre-wrap;样式需要感觉上述样式表选择是否合并换行符(连续多个合成一个)以及InnerText是否换行(\r\n是否转换成<br>),这样就可能不仅仅需要判断的是span,而是所有具有这个样式的元素(保守处理我觉得至少需要判断其上一级的母节点)。
  2. word-wrap可能可以不判断,这个看文档是外文是否允许单词间换行
  3. 上次修改文档树的时候,已经先把span的实验性功能默认值改成false了,至少新用户不会受到影响

@88250
Copy link
Member

88250 commented Apr 11, 2025

目前已经默认 span 换行选项为 false 的话应该就问题不大了,看上去实现会比较复杂,可以后面慢慢考虑,谢谢。

@ruin1990
Copy link
Contributor

嗯,得整理下完整的逻辑,因为对所有元素操作可能会引入新的问题

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

No branches or pull requests

6 participants
@88250 @Vanessa219 @ruin1990 @Jiangshuon @TCOTC and others