登录 注册

如何给一个块添加附注

我记得之前可以给一个块，或者块里的一部分内容加上附注，这个附注会在块的右上角空白的地方一直显示，不会覆盖已有的内容。忘了怎么操作了，哪位知道？

  • 思源笔记

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

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

    24827 引用 • 102127 回帖
  • Q&A

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

    9418 引用 • 42911 回帖 • 109 关注
上海 位置
30 悬赏
1 收藏
4 回帖
2
123 81 4 1 37

相关帖子

被采纳的回答
  • JeffreyChen •
    付费者 支持者 捐赠者

    用这个 CSS 片段，不过如果备注有多行文本的话样式会有问题，并且备注如果有点长的话就显示不完全了：

    .protyle-attr--memo.b3-tooltips {
    max-width: 25vw;
    display: flex;
    align-items: center;
    overflow: hidden;

    svg {
        overflow: initial;
        margin-right: 2px;
    }

    &::before {
        display: none;
    }

    &::after {
        opacity: 1;
        display: contents;
        position: inherit;
        content: attr(aria-label);
        white-space: pre;
        z-index: inherit;
        padding: inherit;
        font-size: inherit;
        font-weight: inherit;
        -webkit-font-smoothing: inherit;
        color: inherit;
        word-wrap: inherit;
        background-color: inherit;
        border-radius: inherit;
        line-height: inherit;
        transform: inherit;
        max-width: inherit;
        overflow: inherit;
        text-overflow: inherit;
        box-sizing: inherit;
        box-shadow: inherit;
        font-family: inherit;
    }
}
​
4 回帖
如何给一个块添加附注

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • JeffreyChen •
    付费者 支持者 捐赠者

    点击块标 - 属性 - 备注/别名

    1 回复
  • Seeking49 •
    订阅者 作者

    这个备注要点开，能一直显示么

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    用这个 CSS 片段，不过如果备注有多行文本的话样式会有问题，并且备注如果有点长的话就显示不完全了：

    .protyle-attr--memo.b3-tooltips {
    max-width: 25vw;
    display: flex;
    align-items: center;
    overflow: hidden;

    svg {
        overflow: initial;
        margin-right: 2px;
    }

    &::before {
        display: none;
    }

    &::after {
        opacity: 1;
        display: contents;
        position: inherit;
        content: attr(aria-label);
        white-space: pre;
        z-index: inherit;
        padding: inherit;
        font-size: inherit;
        font-weight: inherit;
        -webkit-font-smoothing: inherit;
        color: inherit;
        word-wrap: inherit;
        background-color: inherit;
        border-radius: inherit;
        line-height: inherit;
        transform: inherit;
        max-width: inherit;
        overflow: inherit;
        text-overflow: inherit;
        box-sizing: inherit;
        box-shadow: inherit;
        font-family: inherit;
    }
}
​
    1 回复
  • drawone • • 1
    付费者

    把这个优化了一下：
    SiYuan8SoLxQrAAN.gif

    .protyle-attr--memo.b3-tooltips {
    max-width: 25vw;
    align-items: center;
    overflow: flow;
    height: 16px;
    opacity: 0.75;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 25em;
    cursor: help;

    svg {
        overflow: initial;
        margin-right: 2px !important;
    }

    &:hover {
        color: white !important;
        background: #000000d6;
        z-index: 111;
        width: max-content;
        display: table;
        border-radius: 4px;
        border: 1px solid black;
    }

    &::before {
        display: none;
    }

    &::after {
        opacity: 1;
        display: contents;
        position: inherit;
        content: attr(aria-label);
        white-space: pre;
        z-index: inherit;
        padding: inherit;
        font-size: inherit;
        font-weight: inherit;
        -webkit-font-smoothing: inherit;
        color: inherit;
        word-wrap: inherit;
        background-color: inherit;
        border-radius: inherit;
        line-height: inherit;
        transform: inherit;
        max-width: inherit;
        overflow: inherit;
        text-overflow: inherit;
        box-sizing: inherit;
        box-shadow: inherit;
        font-family: inherit;
    }
}
​
Seeking49
知识管理深度爱好者 上海
回帖
33
 帖子
24
 积分
531

近期热议

推荐标签 标签

  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 5 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 165 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 610 关注
  • IPFS

    IPFS（InterPlanetary File System，星际文件系统）是永久的、去中心化保存和共享文件的方法，这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 232 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 33 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 642 关注
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 651 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 2 关注
  • Kafka

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

    36 引用 • 35 回帖 • 1 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 718 关注
  • danl
    • 164 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 618 关注
  • 思源笔记

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

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

    24827 引用 • 102127 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 384 关注
  • Follow
    4 引用 • 12 回帖 • 8 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 488 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 655 关注
  • 运维

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

    151 引用 • 257 回帖
  • ngrok

    ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 644 关注
  • CAP

    CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。

    12 引用 • 5 回帖 • 637 关注
  • LeetCode

    LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！

    209 引用 • 72 回帖 • 1 关注
  • AWS
    11 引用 • 28 回帖 • 10 关注
  • OneDrive
    2 引用 • 3 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 544 关注
  • Word
    13 引用 • 40 回帖

最新标签