Bases: Word wrap in cards / Multiple lines

Feature requests
1

Use case or problem

Similar to the Bases: Word wrap in tables request, there is also sometimes a need to word wrap property values in Card view. For example in a quotation database, the quotation gets cut off:

image
image777×243 7.68 KB

Or in a movie database (peeragetalkers’s example mentioned near the end of the other request thread), the movie title might be cut off.

Proposed solution

Allow to set the height of a property in card view similarly to table view. Or alternatively allow word wrap to the end of the property value

Related feature requests (optional)

26 Likes
2

I voiced support for this here:

4 Likes
3

A solution was shared on Discord:

CSS snippet

bases - modifications v1.css (1.8 KB)

/* ---
USER MODIFY SECTION
--- */

/* REQUIRED stretches the entire height of the card for more title text lines. */
.bases-cards-property:nth-child(2) > div:not(.bases-rendered-value) {
  /* USER MODIFY - Adjust this until titles no longer oddly clip. */
  margin-top: 3.7ch;
}

/* OPTIONAL - Controls the title font size. */
.bases-cards-property.mod-title > .bases-cards-line.bases-rendered-value {
  /* USER MODIFY - Adjust this to modify the size of the title text. */
  font-size: 0.85em;
}

/* ---
Other card changes
--- */

/* REQUIRED for making additional lines display for the title card. */
.bases-cards-line.bases-rendered-value {
  /* Ensures the title text goes to new lines evenly. */
  text-wrap: balance;
  /* Prevents clipping issues with the title card. */
  height: fit-content !important;
}

/* OPTIONAL - Modifies label and value positions. */
.bases-cards-property {
  /* OPTIONAL - Places property labels and values on the same line. */
  display: flex;
}

/* OPTIONAL - Spaces each title exactly 1 character to avoid clipping issues. */
.bases-cards-property.mod-title {
  /* Combo-1 - Spaces the title from the sides which is undone by the padding-inline-start value below.*/
  padding-left: 1ch;
  padding-right: 1ch;
}

/* OPTIONAL - Fixes spacing for line items. */
.bases-cards-line {
  /* Combo-1 - Places the property values closer to the property status.  */
  padding-inline-start: 0;
}

/* Optional: Fixes label positioning */ 
.bases-cards-label {
  /* Forces the property labels to center vertically. Otherwise each one appears placed too high on the card. */
  align-content: center;
}

/* OPTIONAL - Condenses list items together. */
.bases-cards-item {
  /* Places the list items closer together. */
  gap: 0;
}

Screenshot

image
image1917×1322 336 KB

6 Likes
4

Use case or problem

Currently, the title is restricted to a single line. On mobile, this often cuts off longer titles, making them hard to read.
Instead of wrapping text within one line, it would be better if the title box itself allowed for two lines of text.
This would improve readability and presentation, especially for longer titles.
and I think a 2 line title would look so much better than one line

Proposed solution

have setting for the card view titles how there is one for the tables that you can make them short and long

5

This snippet causes a date property to only display the first number in the date. Any idea why?

For example, if the date is 01-23-2025, I would expect it to look like this:
Date 01-23-2025

but instead it looks like this:
Date 0

6

No idea. You could ask the snippet creator on Discord directly.

7

From kepano’s hardcover book effect snippet:

/* Show title on two lines */
.bases-cards-property.mod-title .bases-cards-line {
  font-size: var(--font-ui-small);
  line-height: 1.2;
  height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
2 Likes
8

Thank you for sharing. With this css snippet, the title looks much more comfortable.