行内代码过长时奇怪的断行渲染方式

如题,见下图,默认主题。

图片.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    18957 引用 • 71081 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • @Vanessa 这个没办法改进吗?

  • 这是个已知问题,请参考 Issue #8104 · siyuan-note/siyuan

  • Achuan-2 2 2 赞同

    默认主题

    Clip20240427221711.png

    Clip20240427223251.png

    自定义代码

    .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;
    
    }
    

    Clip20240427221756.png

    Clip20240427223315.png

    @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)

    Clip20240427231256.png

    虽然主题\自定义代码可以做到,不过建议官方考虑一下能否采用这种方案,我是觉得适用于大多数人的,不至于让普通用户困惑。其他用户如果不喜欢 break-all,也可以自定义代码实现 break-word

    3 回复
    5 操作
    Achuan-2 在 2024-04-27 23:18:32 更新了该回帖
    Achuan-2 在 2024-04-27 23:14:23 更新了该回帖
    Achuan-2 在 2024-04-27 22:42:46 更新了该回帖
    Achuan-2 在 2024-04-27 22:33:30 更新了该回帖 Achuan-2 在 2024-04-27 22:29:28 更新了该回帖
  • 超链接应该还是不行,超链接的锚文本不一定是链接本身

    不过换句话说,如果能判断超链接的锚文本是链接本身就行了

    1 回复
  • Achuan-2 1 赞同

    break all 和 break-word 在中文场景下区别不大,英文场景下才有区别。我之前之所以给主题的超链接加 break-all,主要是因为也是有行内代码的问题,如果一个链接的长锚文本被识别一个单词,就会直接与普通文本分行,特别难受。

    Clip20240427232432.png

    如果是普通段落,其实 break-word 就还可以。

    Clip20240427224812.png

    3 操作
    Achuan-2 在 2024-04-27 23:25:09 更新了该回帖
    Achuan-2 在 2024-04-27 23:07:45 更新了该回帖
    Achuan-2 在 2024-04-27 23:04:47 更新了该回帖
  • 我试了下好像不行,还是会有残留的零宽字符在上面。单词被隔断看着很不舒服。

    image.png

    2 回复
  • Achuan-2 1 赞同 2 评论

    这个是正好行内代码就在行末尾导致的的吧,应该情况比较少,大家遇到的残留零宽字符更多是在句子中间就被 break word 打断了,非常突兀。我觉得行内代码主要用来标记代码和路径以及数字、字符串,而不是一个长段落,被打断对我而言无所谓,我也更倾向于渲染效果比较规整的结果,一行只有一半就自动换行反而是一件更受不了的事情。如果行内代码的内容没有空格的话,break word 一般都是把整体看成一个单词的,导致过长就直接分行了。

    语雀貌似不会有这个问题,不知道怎么实现的。此外语雀的行内代码就是用的 break all,我把它改成 break word,昨天测试的时候并没有发现残留零宽字符

    1 回复
    1 操作
    Achuan-2 在 2024-04-28 14:16:04 更新了该回帖
    楼主中的图片和 issue 中说的应该是残留问题,这个调整编辑器宽度应该可以重现。代码里面大部分都是英文,截断感觉会影响阅读。
    Vanessa
    @Vanessa 截断这个看个人喜好了,就不多说了。语雀那个机制 V 姐有研究过吗,我又测试了下,发现确实看不到语雀有思源这种问题,即使把 break-all 改成 break word。语雀也是支持直接在行内代码开头补充内容的
    Achuan-2
  • 3Woods 3 评论

    即便行内代码不在末尾也会有这个问题 😂 。

    图片.png

    楼主中的图片和 issue 中说的应该是残留问题,这个调整编辑器宽度应该可以重现。代码里面大部分都是英文,截断感觉会影响阅读。

    另外也不光是残留的问题,虽然调整宽度可以避免断行,但是在屏幕大小限制(比如移动端),或者需要导出 pdf 时很影响排版美观。😭

    你应该回复 V 姐的,我回复她的那个是说用 break-all 语法为什么也会出现残留零宽字符,用 break-word 就是可能会把行内代码识别为一个单词不打断导致分行。 确实需要的话把我前面的 css 代码片段加入外观设置就好了
    Achuan-2
    JeffreyChen
    导出的时候可以处理一下。移动端估计就没有办法了
    Vanessa
  • Achuan-2 1 1 赞同 3 评论

    我看了下语雀的 DOM 结构,发现语雀的零宽字符是单独用 span 标签包裹的

    image.png

    而使用的零宽字符直接就放在了内容的最左侧

    估计是这个原因,break-word 识别零宽字符是一个单词,后面的长字符串为一个单词,然后就被分割了。不知道思源有没有办法改进下。

    Clip20240428221652.png

    我发现估计是使用的零宽字符的缘故,V 姐试试改用语雀的那种零宽字符,我直接在 DOM 改零宽字符貌似就没有出现残留了!

    @Vanessa

    修改语雀 DOM 用思源的零宽字符,也会出现这个问题

    Clip20240428223517.png

    思源改之前

    Clip20240428223912.png

    改之后

    Clip20240428224011.png

    确实就不会在上一行残留一点点背景了,但是貌似发现了一个缺点——下一行好像会多一个字,语雀由于是 break-all 就没有这个问题

    1 回复
    DOM 结构改不了了。
    Vanessa
    @Vanessa 零宽字符能改吗 我的意思是改成语雀的零宽字符
    Achuan-2
    @Achuan-2 可以改的,但是用的地方比较多,还需要看其他地方有没有问题。我先建个 issue Issue #11248 · siyuan-note/siyuan
    Vanessa
  • 大佬牛批,感谢大佬!

    感觉改零宽字符是个办法。


    我发现在设置里面把两侧对齐打开就会好一些,也可以避免行内代码截断(缺点就是字少的时候一行会很稀疏)。另外就是会有一点背景残留,但是改为 @Achuan-2 说的那种零宽字符后,就不会有残留了,确实是个可行的办法。

    图片.png

    1 回复
    1 操作
    3Woods 在 2024-04-28 23:43:13 更新了该回帖
  • 在官方没改进之前,你可以尝试用我的 Tsundoku 主题,主题对行内代码设置了 break all 的,如果不在意分割单词的话

    1 回复
  • 感谢!已经用上了你前面的代码片段,哈哈

    1 回复
  • ok,不客气

请输入回帖内容 ...

推荐标签 标签

  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 1 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 38 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 509 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    198 引用 • 120 回帖
  • 安装

    你若安好,便是晴天。

    128 引用 • 1184 回帖 • 1 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 592 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖 • 1 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 2 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 1 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 2 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖 • 3 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 3 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 291 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    181 引用 • 448 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖 • 3 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    76 引用 • 37 回帖 • 1 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    83 引用 • 165 回帖 • 39 关注
  • danl
    75 关注
  • 笔记

    好记性不如烂笔头。

    305 引用 • 780 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    22 引用 • 31 回帖 • 3 关注
  • 倾城之链
    23 引用 • 66 回帖 • 104 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    16 引用 • 53 回帖 • 125 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 524 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 250 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    915 引用 • 931 回帖
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    3 引用 • 83 回帖 • 2 关注