#1

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

1 Like
#2 
/* 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
#3

Many thanks @BENWF, it works perfectly :slight_smile:

1 Like
#4

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

Thank you both.

1 Like
#5

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

#6

I can’t make it work either :’(

#7

@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
#8

Thanks for the reply! Unfortunately, that didn’t work for me.

#9

I use this and it works for me:

.nav-file-title, .nav-folder-title, .nav-file-title-content {
    white-space: normal;
}
2 Likes
#10

That worked for me. Thanks!

2 Likes
#11

Thanks @Outis for your help!

1 Like
#12

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
#13

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).

#14

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: