line-numbers Web组件
<line-numbers> 是一个用于在 <pre> 或 <textarea> 元素旁边添加行号的 Web 组件。
功能特性
- 支持
<pre> - 支持
<textarea>(即使在添加或删除行时) - 支持 CSS
overflow(使用侵入式/可见或非侵入式滚动条) - 数字被排除在内容流之外(不可选择,对复制粘贴组件很重要!)
- 通过自定义属性
--uln-number-type使用任何 CSS 计数器样式 - 通过(
<line-numbers start="999">)更改计数器的起始索引 - 数字默认是非侵入式的以减少布局偏移(通过
<line-numbers obtrusive>选择加入侵入式行为)
限制
为了尽可能保持这个组件的简单性,请注意以下几点:
- 不支持行换行(仅支持
white-space: pre或white-space: nowrap,这由组件强制执行) - 不支持使用
contenteditable的元素
5 评论
懒羊羊睡醒了
W3C的标准总是很有参考价值。
Airmole
这个方法很实用,已经应用到我的项目中了。
鬼鬼Sama
思路很清晰,跟着做了一遍成功了。
我我我 CNB
2025/05/10anwen CNB
2025/04/24