Can this be done via CSS alone? Has anyone tried it yet?
/* Wrap long nav text and some paddings */
.nav-file-title,
.nav-folder-title {
white-space: normal;
}
should do the trick
If you want to play around with indentation:
/* Indent wrapped nav text */
.nav-file-title-content {
margin-left: 10px;
text-indent: -10px;
}
Many thanks @bernardo_v for asking the question, and @BENWF for providing the solution. It works perfectly indeed !!
Thank you both.
I can’t get this to work. I started with a fresh vault and no theme installed. I copy-pasted the CSS into my-vault/.obsidian/snippets/nav-wrap.css. The snippet appears in settings and I toggled it on. I restarted obsidian. I’m using v0.12.5.
I’m expecting these filenames to wrap. Any ideas? Thanks
I can’t make it work either :’(
@kbrede and @sanhuesoft
Try to use !important
/* Wrap long nav text and some paddings */
.nav-file-title,
.nav-folder-title {
white-space: normal !important;
}
I’m not a developer but sometimes this trick works when I use a snippet.
I hope it works!
Thanks for the reply! Unfortunately, that didn’t work for me.
I use this and it works for me:
.nav-file-title, .nav-folder-title, .nav-file-title-content {
white-space: normal;
}
That worked for me. Thanks!
In case anyone comes across this in the future, the original solutions weren’t working for me (maybe an update broke them?) The following seems to be working for me for now:
/* Wrap long nav text*/
.nav-file-title,
.nav-folder-title,
.nav-file-title-content,
.nav-folder-title-content {
white-space: normal;
width: auto;
}
/* Indent wrapped text */
.nav-file-title-content,
.nav-folder-title-content {
margin-left: 10px;
text-indent: -10px;
}
Bonus: I also wrapped the titles in my editor, since I frequently have really long ones. It’s a bit rough but it works:
/* Wrap title in editor */
.view-header {
height: auto;
}
.view-header-title {
overflow: auto;
line-height: revert;
white-space: normal;
padding-top: .25em;
}
Thanks AlembicOrange, the other solutions weren’t working for me but yours did. In case others are troubleshooting, I’m on version 0.12.15 for Mac with the Clair de Lune theme (I mention the theme because others, like Atom, seem to break a bit with this snippet).
Thanks so much for this. Previous iterations weren’t working, but this did the trick. Really appreciate you coming back to update the group.
Hi, a few months late, but none of these solutions work for me, unfortunately. Any ideas?
I’m using the theme Shimmering Focus, which has a trimming function built in, but only for files, not folders
.trim-long-filenames :is(.nav-file-title-content, .tree-item-inner, .search-result-file-title) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I tried adding .nav-folder-title
to that list after the :is
but that didn’t work either.
Thanks
Edit: I noticed that I was missing the -content
after the .nav-folder-title
(so .nav-folder-title-content
) and now it works, thanks guys
Nevermind: this doesn’t work after all. For a moment the folder titles were trimmed as well, but I don’t know why lol