Skip to content

怎么限制数据库换行文本的最大行数? #11365

Closed
@TCOTC

Description

@TCOTC
Contributor

https://ld246.com/article/1715443199417

怎么限制数据库换行文本的最大行数?

目前通过下面的代码片段可以将换行文本限制为3行:

.av__row:not(.av__row--header) .av__cell[data-wrap="true"] .av__celltext {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

但是鼠标悬浮在上面时无法显示全部文本:

image

不换行的可以显示:

image

想知道有什么办法能让文本被截断的单元格在鼠标悬浮时显示全部文本?


这个代码片段还有个问题是,会导致绑定块的主键下方的那条线延长:

image

Activity

Vanessa219

Vanessa219 commented on May 12, 2024

@Vanessa219
Member

这个需要修改一下 js, 下划线的话估计只能用 text-decoration: underline;

TCOTC

TCOTC commented on May 12, 2024

@TCOTC
ContributorAuthor

我目前选择的方案是使用下面两个代码片段:

/* 最多3行 */
.av__row:not(.av__row--header) .av__cell[data-wrap="true"] .av__celltext {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* 主键下划线 */
.av__celltext--url, .av__celltext--ref {
  border-bottom: 0px;
  text-decoration: underline;
  text-decoration-color: var(--b3-border-color);
}
document.querySelectorAll('.av__row:not(.av__row--header) .av__cell[data-wrap="true"] .av__celltext').forEach(element => {
  // 提取文本
  const text = element.textContent.trim();
  
  // 添加 ariaLabel 类
  element.classList.add('ariaLabel');
  
  // 添加 aria-label 属性
  element.setAttribute('aria-label', text);
});

但我不知道怎么让这个 JS 在数据库 DOM 变化后重复运行,我最多只懂得让它隔几秒运行一次:

function updateAriaLabels() {
  document.querySelectorAll('.av__row:not(.av__row--header) .av__cell[data-wrap="true"] .av__celltext').forEach(element => {
    // 提取文本
    const text = element.textContent.trim();
    
    // 添加 ariaLabel 类
    element.classList.add('ariaLabel');
    
    // 添加 aria-label 属性
    element.setAttribute('aria-label', text);
  });
}

// 每3秒执行一次updateAriaLabels函数
setInterval(updateAriaLabels, 3000);

除此之外还有个问题是没被截断的文本也会显示提示,我不知道怎么判断文本是否有被截断:

image

TCOTC

TCOTC commented on May 12, 2024

@TCOTC
ContributorAuthor

然后我就没什么头绪了,需要 @Vanessa219 指点一下

TCOTC

TCOTC commented on May 13, 2024

@TCOTC
ContributorAuthor

还有个问题是开启了换行的主键始终会多一行

image

image

Vanessa219

Vanessa219 commented on May 13, 2024

@Vanessa219
Member

js 要在

if (aElement.classList.contains("av__cell")) {
进行修改。

多一行的问题我这里没有。

TCOTC

TCOTC commented on May 13, 2024

@TCOTC
ContributorAuthor

现在用这两个代码片段,只有被截断的文本才会产生悬浮提示了:

/* 限制数据库换行文本最大行数 CSS片段 */
.av__row:not(.av__row--header) .av__cell[data-wrap="true"] .av__celltext {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; //最多3行
  overflow: hidden;
}
/* 主键下划线 */
.av__celltext--url, .av__celltext--ref {
  border-bottom: 0px;
  text-decoration: underline;
  text-decoration-color: var(--b3-border-color);
}
/* 限制数据库换行文本最大行数 JS片段 */
document.querySelectorAll('.av__row:not(.av__row--header) .av__cell[data-wrap="true"]').forEach(cell => {
  const textElement = cell.querySelector('.av__celltext'); // 查找包含文本的子元素
  if (textElement && textElement.scrollHeight > textElement.clientHeight) { // 检查文本是否被截断
    const text = textElement.textContent.trim();  // 提取文本
    cell.setAttribute('aria-label', text); // 为单元格添加 aria-label 属性
  }
});

  1. 但 JS 是一次性的,我不懂怎么让它重复运行(监听事件/DOM变化之类的我都不懂,GPT给的MutationObserver的代码一直报错),只能在开启代码片段的时候运行一次。

    • 我希望在文档加载之后/数据库编辑刷新之后运行,不知道怎么实现?
  2. 并且主键开启换行之后下面会多一行:

image

TCOTC

TCOTC commented on May 13, 2024

@TCOTC
ContributorAuthor

这个 JS 片段不知道怎么整,只能改思源本身了 #11373

这样就只剩下主键多一行的问题了

/* 限制数据库换行文本最大行数 CSS片段 */
.av__row:not(.av__row--header) .av__cell[data-wrap="true"] .av__celltext {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; //最多3行
  overflow: hidden;
}
/* 主键下划线 */
.av__celltext--url, .av__celltext--ref {
  border-bottom: 0px;
  text-decoration: underline;
  text-decoration-color: var(--b3-border-color);
}

image

TCOTC

TCOTC commented on May 13, 2024

@TCOTC
ContributorAuthor

给文本加了 overflow: auto; 之后是这样的:

default.webm
88250

88250 commented on May 13, 2024

@88250
Member

但不能直接展开看到全部,折行的目的是为了方便看全部,不是为了截断缩减展示。

TCOTC

TCOTC commented on May 13, 2024

@TCOTC
ContributorAuthor

我是想在 1 行N 多行 之间找个折中,只展示 1 行和全部展示是两个极端,要么太短要么太长

88250

88250 commented on May 13, 2024

@88250
Member

这个怕是没法折中,两个需求,否则的话设计就麻烦了,还要设置一个参数给用户:保留 n 行显示

TCOTC

TCOTC commented on May 13, 2024

@TCOTC
ContributorAuthor

所以只用自定义的 CSS 片段就可以了,但没法显示悬浮提示

88250

88250 commented on May 13, 2024

@88250
Member

没有问题的话我们关闭 issue 了哦,谢谢。

13 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @88250@Vanessa219@TCOTC

      Issue actions

        怎么限制数据库换行文本的最大行数? · Issue #11365 · siyuan-note/siyuan