Soft-wrap file name in sidebar

Share & showcase
,
1

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

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

That worked for me. Thanks!

3 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;
}
4 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:

15

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

16

FYI there’s a feature request for this that you could upvote Text wrap for titles

1 Like
17

Try this:

/* 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

18

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 */
}
1 Like
19

This does exactly what I want. Thank you!

(Wasn’t softwrap of titles in the sidebar supposed to be implemented in a recent release? Text wrap for titles - #4 by WhiteNoise )

20

Honestly, this should be an official option, rather than a CSS hack.