Soft-wrap file name in sidebar

Can this be done via CSS alone? Has anyone tried it yet?

1 Like
/* Wrap long nav text and some paddings */
.nav-file-title,
.nav-folder-title {
	white-space: normal;
}

should do the trick :slight_smile:

If you want to play around with indentation:

/* Indent wrapped nav text */
.nav-file-title-content {
	margin-left: 10px;
	text-indent: -10px;
}
5 Likes

Many thanks @BENWF, it works perfectly :slight_smile:

1 Like

Many thanks @bernardo_v for asking the question, and @BENWF for providing the solution. It works perfectly indeed !!

Thank you both.

1 Like

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

obsidian-nav

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!

1 Like

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;
}
2 Likes

That worked for me. Thanks!

2 Likes

Thanks @Outis for your help!

1 Like

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;
}
2 Likes

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. :slight_smile:

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 :slight_smile:

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 :slight_smile:

Nevermind: this doesn’t work after all. For a moment the folder titles were trimmed as well, but I don’t know why lol