bases有无办法显示溢出的文本,而不是”...“这样

使用bases做书库的时候发现过长的文本无法显示出来,在手机上使用更严重,基本只能显示书名的第一个字后面就是省略号了

可以通过改 text-overflow 属性为 clip,这种是直接裁切不显示省略号

我的帖子有包含这部分的小优化:「Bases」极简卡片视图(美化css小合集,不定期更新)

有没有将文本完全显示的方法

你问的太模糊了,可能的方案是写个css缩小字号、悬浮显示等等

如果你指的是根据文本自动调整高度,目前是不可行的,后续应该也不会添加,因为bases的卡片视图依赖固定DOM位置,否则性能开销很大

指的是属性内容较长时,希望其能换行显示。不过看您的说法,应该是不可行了


这是我借助AI写的bases卡片的代码,但是下边框离文字太近了,您知道有什么解决办法吗?

/* 隐藏所有卡片视图中的属性标签 */
.bases-cards-label {
display: none;
}

/* ========================================
Notion 风格 Bases 卡片样式
======================================== */

/* 卡片容器 */
.bases-cards-view .bases-cards-items {
gap: 20px !important;
}

/* 单个卡片 - 圆角调小为 8px /
.bases-cards-item {
border-radius: 8px !important; /
从 16px/12px 改为 8px */
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04) !important;
transition: all 0.25s cubic-bezier(0.2, 0, 0, 1) !important;
background: var(–background-primary) !important;
}

/* 卡片悬停 */
.bases-cards-item:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
transform: translateY(-3px) !important;
}

/* 封面图片区域 - 圆角与卡片顶部保持一致 /
.bases-cards-cover {
border-radius: 8px 8px 0 0 !important; /
从 16px 改为 8px */
background-color: #f5f5f7 !important;
}

/* 标题样式 */
.bases-cards-title {
font-weight: 600 !important;
font-size: 1rem !important;
margin-bottom: 8px !important;
}

/* 属性行 */
.bases-cards-property {
margin: 6px 0 !important;
font-size: 0.85rem !important;
}

把这里的margin: 6px 0 !important;删掉整行或者数值调小一点试试

这里有个多行的解决方案,可以尝试一下:

确实有效,终于解决了,感谢