在层次结构中绘制连接器的非图像解决方案

Posted 2023-02-26

【中文标题】在层次结构中绘制连接器的非图像解决方案

【英文标题】：Non-image solution to drawing connectors in hierarchical structure

【发布时间】：2011-03-02 03:07:17

【问题描述】：

我想要做的是创建一个从第二个 tr 到下面所有 tr 的连接器，除了最后一个。这是我目前基于图像的解决方案：

http://jsfiddle.net/DmcEB/13/

但是，我不想依赖图像。例如，改用 Unicode 字符 (unicode-search.net/unicode-namesearch.pl?term=bracket)。

环境：Rails、html/CSS、原型

【参考方案1】：

您可以在每个单元格前加上unicode box drawing element。我更像是一个 jQuery 人，但我认为 Prototype 的插入或替换方法可以做到这一点。

此解决方案的唯一问题是您的用户是否需要选择文本。但是对于大多数浏览器，您可以使用 span 包装字符并使用 CSS 来防止选择 unicode 字符。

类似这样的： http://jsfiddle.net/DmcEB/18/

（最后一个元素需要修复）

【参考方案2】：

使用:before 和content:"" 可以获得纯CSS 解决方案。前提是客户端可以处理 unicode 字符：

http://jsfiddle.net/ctrlfrk/DmcEB/19/

以下是方框图 unicode 字符列表供参考： http://en.wikipedia.org/wiki/Box_drawing_characters