登录 注册

[反馈] 标签位于段落开头时, 光标无法显示在标签外部

本贴最后更新于 582 天前，其中的信息可能已经水流花落

当标签不在开头时,光标可以显示在标签外面,如下

Snipaste20221009125729.png

但是当标签位于开头时,光标无法显示在标签外部

Snipaste20221009130019.png

视频:

  • 思源笔记

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

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

    19010 引用 • 71370 回帖 • 2 关注
上海 位置
1 感谢
6 回帖
3
3
390 62 30 177 1 7 9 102

相关帖子

6 回帖
[反馈] 标签位于段落开头时, 光标无法显示在标签外部

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • iamqiz •
    作者

    我看了下语雀的实现,发现当行内元素前面没有字符时,会在行内元素前面加一个零宽空格占位 ,如下图

    这或许就是语雀可以做到当行内代码位于开头时,光标能移动到行内代码外部的原因 ?

    Snipaste20221009214145.png

    1 操作
    iamqiz 在 2022-10-09 23:18:34 更新了该回帖
  • 其他回帖
  • 88250 •
    订阅者 MOD

    默认的样式估计暂时不会调整，这个可以参考一下代码或者键盘的样式，可能有帮助。

    1 回复
  • iamqiz • • 3 评论
    作者

    行内代码也是这个问题,

    当行内代码位于开头时,光标无法移动到其边框外部

    Snipaste20221009214843.png

    当行内代码不位于开头时,即前面还有字符时,光标可以移动到其边框外部或内部,如下

    Snipaste20221009214918.png

    Snipaste20221009214934.png

    1 回复
    标签的样式会对输入操作有一定的影响。可以把标签样式放到 code 上看看是不是你需要的效果？
    Vanessa •
    @Vanessa 没太理解"标签样式放到 code 上"啥意思, 现在 code(行内代码)的样式是我喜欢的, 但是它显示光标有问题, 通过改 css 也解决不了吧, 语雀是这么解决的: [反馈] 标签位于段落开头时, 光标无法显示在标签外部 - iamqiz 的回帖
    iamqiz •
    @iamqiz 现在标签前后没有零宽空格，但是代码块有，可以把标签的带图标的样式放在代码块上，试一试能不能移的出去？
    Vanessa •
  • iamqiz •
    作者

    默认主题下,光标是能够移动到标签内或标签外部,

    但是在视觉上是看不出光标是在内部还是在外部的,

    比如下图, 无论在内在外,都是显示在"是"和"法"之间

    Snipaste20221009211423.png

    而通过 css 给标签加上边框之后能从视觉上看出光标是在标签内部还是外部,

    在内部:

    Snipaste20221009211500.png

    在外部:

    Snipaste20221009211540.png

    但是如果标签前面没有纯文本了,即没有"是"这个字符串, 那么

    无论光标是在内在外,都只显示在内部, 如下图所示

    Snipaste20221009212608.png

    css 如下:

    .protyle-wysiwyg span[data-type~=tag] {
  font-size: 1em;
  border-bottom: 0 none transparent !important;
  border-radius: 1em;
  padding: 1px 0.5em 1px 0.5em;
  transition: all 200ms linear 0ms;
}

.protyle-wysiwyg [data-node-id] span[data-type="tag"] {
 
  background-color: var(--custom-span-tag-background-color);
}
    1 回复
  • 查看全部回帖
iamqiz
链滴 666666 号成员 上海
回帖
184
 帖子
94
 积分
14822

近期热议

推荐标签 标签

  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 346 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    6639 引用 • 29781 回帖 • 246 关注
  • 分享

    有什么新发现就分享给大家吧！

    242 引用 • 1746 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 30 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 293 关注
  • CodeMirror
    1 引用 • 2 回帖 • 120 关注
  • gRpc
    10 引用 • 8 回帖 • 55 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    90 引用 • 383 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 4 关注
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖 • 9 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 241 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    82 引用 • 122 回帖 • 621 关注
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 355 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 623 关注
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 336 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    941 引用 • 1458 回帖 • 147 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 54 关注
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    76 引用 • 421 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    35 引用 • 35 回帖 • 4 关注
  • ZeroNet

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

    1 引用 • 21 回帖 • 593 关注
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    73 引用 • 157 回帖
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    478 引用 • 902 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 76 关注

最新标签