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

[TCOTC]

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

[Vanessa219]

使用最新代码再试试

[Vanessa219]

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

[TCOTC]

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

/* 最多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);

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

[TCOTC]

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

[TCOTC]

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

[Vanessa219]

js 要在

siyuan/app/src/block/popover.ts

Line 26 in 50d2562

if (aElement.classList.contains("av__cell")) {

进行修改。

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

[TCOTC]

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

/* 限制数据库换行文本最大行数 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. 并且主键开启换行之后下面会多一行：

[TCOTC]

这个 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);
}

[TCOTC]

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

default.webm

[88250]

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

[TCOTC]

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

[88250]

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

[TCOTC]

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

[88250]

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

[TCOTC]

还没解决呢，这个 CSS 有两个问题：

1. 截断文本没有悬浮提示
2. 主键开启换行后底下会多出一行的空间

[88250]

@Vanessa219 有空的话再看看

[Vanessa219]

1. 稍后 js 支持
2. 贴一下完整的最终代码片段，我这里需要重现。

[TCOTC]

回复 01

贴一下完整的最终代码片段，我这里需要重现。

@Vanessa219 如下：

/* 限制数据库换行文本最大行数 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--ref {
  border-bottom: 0px;
  text-decoration: underline;
  text-decoration-color: rgb(72,255,32);
}

[TCOTC]

回复 02

稍后 js 支持

@Vanessa219 js 或许可以改成这样：（仅供参考）

if (!tip && event.target.dataset.type !== "block-more" && !hasClosestByClassName(event.target, "block__icon")) {
    if (aElement.dataset.wrap !== "true") {
        aElement.style.overflow = "auto";
        if (aElement.scrollWidth > aElement.clientWidth + 2) {
            tip = getCellText(aElement);
        }
        aElement.style.overflow = "";
    }
    else {
        const textElement = aElement.querySelector(".av__celltext");
        if (textElement.scrollHeight > textElement.clientHeight) {
            tip = getCellText(aElement);
        }
    }
}

app/src/block/popover.ts

[TCOTC]

js 或许可以改成这样：（仅供参考）

如果不改思源本身的话，我想到了一个复杂的方法：（只不过 主键开启换行后底下会多出一行的空间 的问题还是没能解决）

// 限制数据库换行文本最大行数 JS片段 - author: JeffreyChen

var animationFrameRequestId = null; // 用于存储 requestAnimationFrame 的 ID
function updateAriaLabels() { // 数据库渲染后所有 aria-label 属性都会丢失，所以直接全部添加即可
  // 如果已经有一个动画帧请求在等待，取消它
  if (animationFrameRequestId !== null) {
    cancelAnimationFrame(animationFrameRequestId);
  }
  animationFrameRequestId = requestAnimationFrame(function() {
    document.querySelectorAll('.av__row:not(.av__row--header) .av__cell[data-wrap="true"]').forEach(cell => {
      const textElement = cell.querySelector('.av__celltext'); // 查找包含文本的子元素
      // 检查父元素是否已有 aria-label 属性、是否是有效的 DOM 元素、文本是否被截断
      if (!cell.getAttribute('aria-label') && textElement && textElement.scrollHeight > textElement.clientHeight) {
        const text = textElement.textContent.trim();  // 提取文本
        cell.setAttribute('aria-label', text); // 为单元格添加 aria-label 属性
      }
    });
    // 重置 animationFrameRequestId，以便下次调用 updateAriaLabels 时可以检查
    animationFrameRequestId = null;
  });
}
function updateAriaLabels2() { // 调整列(宽)后 aria-label 仍然保留，需要逐个判断移除或者添加
  // 如果已经有一个动画帧请求在等待，取消它
  if (animationFrameRequestId !== null) {
    cancelAnimationFrame(animationFrameRequestId);
  }
  animationFrameRequestId = requestAnimationFrame(function() {
    document.querySelectorAll('.av__row:not(.av__row--header) .av__cell[data-wrap="true"]').forEach(cell => {
      const textElement = cell.querySelector('.av__celltext'); // 查找包含文本的子元素
      // 检查父元素是否已有 aria-label 属性、是否是有效的 DOM 元素、文本是否被截断
      if (cell.getAttribute('aria-label') && textElement && !(textElement.scrollHeight > textElement.clientHeight)) {
        cell.removeAttribute('aria-label'); // 为无截断文本的单元格移除 aria-label 属性
      } else if (!cell.getAttribute('aria-label') && textElement && textElement.scrollHeight > textElement.clientHeight) {
        const text = textElement.textContent.trim();  // 提取文本
        cell.setAttribute('aria-label', text); // 为有截断文本单元格添加 aria-label 属性
      }
    });
    // 重置 animationFrameRequestId，以便下次调用 updateAriaLabels 时可以检查
    animationFrameRequestId = null;
  });
}

var timeoutId = null;
// 创建一个新的 MutationObserver 实例，并提供一个回调函数
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes') {
      // 数据库渲染：检查被修改的节点是否是数据库 av 类型并且已经渲染完成
      if (mutation.target.classList.contains('av') && mutation.target.getAttribute('data-render') === 'true') {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
        updateAriaLabels()
        }, 500); // 500 毫秒延时。用以避免短时间内重复执行
      // 调整列(宽)：检查被修改的节点是否是数据库列头并且开启了换行
      } else if (mutation.target.classList.contains('av__cell--header') && mutation.target.getAttribute('data-wrap') === 'true') {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
          updateAriaLabels2()
        }, 500); // 500 毫秒延时。拖拽的过程中属性会高频变化，此时不继续运行
      }
    }
  });
});
// 配置MutationObserver以观察DOM树的变化
const config = { attributes: true, childList: false, subtree: true };
// 开始观察
observer.observe(document.body, config);

// 创建一个新的style元素
var style = document.createElement('style');
// 添加CSS代码
style.textContent = `
  .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--ref {
    border-bottom: 0px;
    text-decoration: underline;
    text-decoration-color: rgb("72,255,32");
  }
`;
// 将style元素添加到文档的head中
document.head.appendChild(style);

p.s. 这种用多了感觉性能不好