【已解决】求一个让标签完整显示的CSS

疑问解答
1

遇到的问题

手机屏幕没有电脑那么宽，有时标签恰好在换行处。

IMG_20230131_031446
IMG_20230131_0314461080×358 44.6 KB

就会导致标签被分到不同行，这样标签看起来不像一个整体。

预期的效果

我在 Gitisidian 的阅读模式发现了它能够让标签完整显示，这是我预期的效果，但我不懂 css，不知道咋效仿它做出有同样效果的 css。

IMG_20230131_031431
IMG_20230131_0314311080×310 40.8 KB

所以不知道哪位大佬有空路过能帮个忙:laughing:

1 个赞
2

这是因为阅读视图里, 无论多复杂的组合标签, 都在外面包裹着 <a> 于是很容易控制样式

而在编辑模式/源码模式, 标签是由多个 <span> 一起构成的, 每个span依次包裹着 #, 标签文字1, 标签文字2 … 这些 span 没法从整体控制换行

再加上中英文的 “换行打断” 本来就不一样, 确实不好办 (其实英文标签可以正确显示, 只有中文的出问题)

解决办法:

.cm-hashtag {
  white-space: nowrap !important;
}
.cm-hashtag-begin {
  display: none !important;
}
.cm-hashtag-begin+.cm-hashtag:before {
  content: '#' !important;
}
.cm-hashtag-begin+.cm-hashtag {
  border-top-left-radius: var(--tag-radius);
  border-bottom-left-radius: var(--tag-radius);
  border-right: none;
  border-left: var(--tag-border-width) solid var(--tag-border-color);
  padding-left: var(--tag-padding-x);
}

禁它自带的 # 标记, 并重新控制显示出来

效果 (原先):

1
1936×791 52.2 KB

效果 (现在):

2
2887×801 51 KB

1 个赞
3

感谢老哥的解答！
我试了下编辑模式下生效了，但阅读模式下还是会被截断。
另外还有两个问题，一是启用css后我无法选中标签中的#号，二是在BlueTopaz主题下显示有点问题（我换回默认是没问题的）

微信图片_20230208145301
微信图片_202302081453011035×180 17.3 KB

当然这两个问题都不大，我手机上用的Github主题能正常显示就行了 :wink:

4

1 阅读模式下还是会被截断

是的, 阅读模式没 .cm-hashtag 这东西, 之前那堆样式没用

阅读模式里, 直接加上

a.tag {
  display: inline-block !important;
}

就行

2 BlueTopaz主题下显示有点问题

试了, BlueTopaz 对 span.cm-hashtag-end 有个独特调整, 确实如截图所示
感觉主题已经挺好了, 强行凑出来圆角要加一堆样式, 有点不值,
如你所说, 手机上换个主题看看就行了

要在BlueTopaz主题的编辑模式, 改进中文标签换行, 且保持圆角, 大概得类似这样子:

...前面都一样...

.cm-hashtag-begin+.cm-hashtag {
  border-top-left-radius: var(--tag-radius) !important;
  border-bottom-left-radius: var(--tag-radius) !important;
  border-right: none !important;
  border-left: var(--tag-border-width) solid var(--tag-border-color) !important;
  padding-left: var(--tag-padding-x) !important;
}

.cm-hashtag.cm-hashtag-end {
  padding-right: var(--tag-padding-x) !important;
}

body:not(.tag-default) .cm-s-obsidian span.cm-hashtag-end {
  border-top-right-radius: var(--tag-radius) !important;
  border-bottom-right-radius: var(--tag-radius) !important;
}

3 启用css后无法选中#号

因为把原先的井号隐藏了, 造了个假的 (于是井号跟标签主体在同一行)
编辑时确实有点别扭

1 个赞
5

试了下，完美实现了，感谢老哥 :pray: