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
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:
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).
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
/* Files */
.oz-nav-file-title .oz-nav-file-title-content {
white-space: normal; /* This produces the text wrapping */
display: contents; /* This causes the first letter of each line to be alined */
color: #f8c537; /* Font Color */
}
.oz-nav-file-title{
line-height: 15px; /* Reduce height between lines */
padding: 3px 0px; /* Increase space between file names */
}
/* Folders */
.oz-folder-line {
white-space: normal; /* This produces the text wrapping for folders */
}
.oz-folder-element {
line-height: 1.1em; /* Reduce height between lines */
padding: 3px 0px; /* Increase space between folder names */
}
.oz-folder-name {
color: #f8c537; /* Font Color */
}
I’m not certain if the theme matters or not, but I’m using Wasp.
Update: I think this code might only apply if your using the File Tree Alternative Plugin
If your using the original file tree, this might work"
.nav-file-title-content, .nav-folder-title-content {
white-space: normal; /* This produces the text wrapping */
}
.nav-file-title {
color: #f8c537; /* Color for files */
}
.nav-folder-title {
color: #f83a598; /* Color for folders */
}