如题,见下图,默认主题。
行内代码过长时奇怪的断行渲染方式
相关帖子
-
这个是正好行内代码就在行末尾导致的的吧,应该情况比较少,大家遇到的残留零宽字符更多是在句子中间就被 break word 打断了,非常突兀。我觉得行内代码主要用来标记代码和路径以及数字、字符串,而不是一个长段落,被打断对我而言无所谓,我也更倾向于渲染效果比较规整的结果,一行只有一半就自动换行反而是一件更受不了的事情。如果行内代码的内容没有空格的话,break word 一般都是把整体看成一个单词的,导致过长就直接分行了。
语雀貌似不会有这个问题,不知道怎么实现的。此外语雀的行内代码就是用的 break all,我把它改成 break word,昨天测试的时候并没有发现残留零宽字符
1 回复1 操作Achuan-2 在 2024-04-28 14:16:04 更新了该回帖 - 其他回帖
-
默认主题
、
自定义代码
.b3-typography code:not(.hljs), .b3-typography span[data-type~='code'], .protyle-wysiwyg code:not(.hljs), .protyle-wysiwyg span[data-type~='code'] { word-break: break-all; }
@88250 用 word-break: break-all;就能解决这个问题,只不过不会按单词分割,但是我觉得行内代码本身就有底纹,不按单词分割也没什么,是可以明确知道上一行和下一行有没有空格的,不会造成歧义,我自己使用过程中没发现过有所影响。类似的还有超链接。
正文要 break-word 我能理解,但像这种特殊样式,本身就可以靠格式独立出来,break-all 的体验更好其实,我自己用的 Tsundoku 主题就一直用的 break-all。
break-word 反而有时候会莫名奇妙的分行看的还不舒服。因为本身 inline-code、inline-hyperlink,就是行内元素,预期用户输入的就是单行文字,反而因为 break-word 被分割渲染看起来变成了多行。另外,break-word 也不能保证一定按单词分割,行内代码除了代码之外,另一个广泛的用法就是放路径了,对于一般没有空格的长路径,可是直接识别成一个单词的,这时候效果就会很不好,直接前面断了一行。(notion 之类的是不支持直接编辑行内代码左侧,所以问题不太大,而语雀用的就是 break-all)
虽然主题\自定义代码可以做到,不过建议官方考虑一下能否采用这种方案,我是觉得适用于大多数人的,不至于让普通用户困惑。其他用户如果不喜欢 break-all,也可以自定义代码实现 break-word
3 回复 -
我看了下语雀的 DOM 结构,发现语雀的零宽字符是单独用 span 标签包裹的而使用的零宽字符直接就放在了内容的最左侧估计是这个原因,break-word 识别零宽字符是一个单词,后面的长字符串为一个单词,然后就被分割了。不知道思源有没有办法改进下。我发现估计是使用的零宽字符的缘故,V 姐试试改用语雀的那种零宽字符,我直接在 DOM 改零宽字符貌似就没有出现残留了!
修改语雀 DOM 用思源的零宽字符,也会出现这个问题
思源改之前
改之后
确实就不会在上一行残留一点点背景了,但是貌似发现了一个缺点——下一行好像会多一个字,语雀由于是 break-all 就没有这个问题
1 回复 - 查看全部回帖
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于