"How to achieve" CSS code snippets

Share & showcase
152

Someone asked for a CSS solution to shorten long filename links in Dataview tables.

Here’s a solution that does exactly that. It truncates only links in Dataview tables, with an ellipsis.

/*
    dataview-shorten-links.css snippet

    Shortens long filename links in Dataview tables with an ellipsis.
    2021-05-07 Matthias C. Hormann (Moonbase59)
*/
.dataview.table-view-table > tbody > tr > td a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Result:

obsidian-css-snippet-dataview-links
obsidian-css-snippet-dataview-links716×139 17.5 KB

Might be useful for people using [[extremely long links in Obsidian to save an idea]] … :grin:

Tested with Obsidian 0.11.13 and Dataview 0.3.2. Thought I put it here so it can be more easily found. @Klaas and others: Feel free to add it into publicly available collections.

EDIT 2021-05-15: If you use clickable inline tags (like with my Nearby code), you might want to exclude a.tag from the above, otherwise you’ll only get one tag per line (but you want as many as possible):

/*
    dataview-shorten-links.css snippet

    Shortens long filename links in Dataview tables with an ellipsis.
    2021-05-15 Matthias C. Hormann (Moonbase59)
*/
.dataview.table-view-table > tbody > tr > td a:not(.tag) {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Tested (again) with Obsidian 0.12.3 and Dataview 0.3.3, 0.3.5.

15 Likes