nekoshita/obsidian-auto-card-link

Line wrap and card height causing content to get cut off

Closed this issue · 6 comments

JoostScheffer commented

When the width of a pane is decreased it causes line wrapping inside the card. This sometimes causes content to get cut off, which is something I find undesirable.

Examples:

  • When the width of a "pane" exceeds the width of the content a card displays normally (no line wrapping) image
  • A small amount of line wrapping, here only the word "by" is wrapped image
  • Here line wrapping is causing the content to extend beyond the boundaries of the card. The title, Github logo and name of the site are partially cut off.
    image
  • Here line wrapping does not cause the elements to move any further. Content that exceeds the line count is replaced with an Ellipsis (…)
    image

My opinion

To me it would seem nice if none of the content were to get cut off because of line-wrapping. I would suggest starting the usage of the Ellipsis before content would get cut off.

Environment:

I am using the regular dark theme, on Linux (Plasma 5) with Obsidian for Linux. The screenshots above were made in preview mode.
I included +-symbols in the screenshots for reference.

JoostScheffer commented

I also just noticed that content also gets cut off when the "description" is too long.
Example:
image

helicos6 commented

I also noticed this issue. Strangely, modifying the styles.css file ( vault/.obsidian/plugins/auto-card-link/styles.css ) does not seem to have any effect on the Card style.

image

curiosity654 commented

Same problem here

shayded-exe commented

Also experiencing this. It's especially an issue with an increased font size. Setting the card height with em instead of px should fix this.

image

LukasManinger commented

I solved this problem by using a CSS snippet ("Options" → "Appearance" → "CSS snippets"). Simply put a .css file with the following content into your snippets folder:

.auto-card-link-card {
    height: 9em;
}

.auto-card-link-thumbnail {
    height: 100%;
    max-width: 40%;
}

This should ensure that card links work independent of font size. However, which exact values you use is a matter of personal preference.

  • 👍1
nekoshita commented

thanks for the PR!
release it as v1.2.1