@ cssints/ 余额
text-wrap: balance 财务报告和审定财务报表 text-wrap: pretty 页:1 点缀成员 cssints/plugin scope()。 。 。 .
css.textWrap("balance") 已经给出了本地特性; 此软件包添加的是倒置: 对于浏览器列表
目标 text-wrap: balance (碱性催化分解) css.properties.text-wrap.balance:Chrome 114, Firefox 121, Safari 17.5), 互联网档案馆的存檔,存档日期2013-12-20,
a 0.55 kB 脚本平衡行道 时间/文本平衡器 财务报告和审定财务报表
反应- wrap- 平衡器 来.
import { cn, fontSize } from "cssints" with { type: "cssints" };
import { balance, pretty } from "@cssints/balance" with { type: "cssints" };
export const title = cn(balance(), fontSize("2rem"));
export const lead = pretty();
@layer _.k {
._balance-core {
text-wrap: balance;
}
._balance-prettyCore {
text-wrap: pretty;
}
/* only when a target lacks text-wrap: balance */
@supports not (text-wrap: balance) {
._balance-core {
--balance-js: 1;
}
}
}
浏览器
- 土著数字 :
text-wrap: balance在Chrome 114、Firefox 121、Safari 17.5中;text-wrap: pretty在Chrome 117和 Safari 26号,不在Firefox. - 运行时间 覆盖每个浏览器
ResizeObserver(Chrome 64, Firefox 69, Safari 13.1).bun run test:browsers在Chrome, Firefox 和 WebKit 中检查, 本地和本地特性关闭: 脚本 给出与浏览器相同的行.
规则
balance()是一个内核写成样式,css.textWrap("balance"),并有一个运行时间条目css.properties.text-wrap财务报告和审定财务报表css.properties.text-wrap.balance,它涵盖了内核的支持警告。 当a 目标缺少它,工作表得到上述倒置规则:--balance-js: 1内部@supports not (text-wrap: balance), (中文(简体) ), 所以它只在一个没有特性的浏览器, 和使用模块balance()将脚本导入到virtual:cssints/runtime/balance.script(运行时的条目命名它,script) (中文(简体) ). 当每个目标都拥有它时 规则或脚本船:运行时模块为空。 无论是哪种方式,都无支持警告,也无任何手工导入.- 运行时间 (单位:千美元)
@cssints/balance/runtime,没有进口,552个字节已变更和被子化)对一个类别要素采取行动_balance-core他们的计算--balance-js设置: 二进制搜索最窄max-width(半数之间) 宽度和所有宽度),保持了元素的高度,所以行数会保持并平出行. 又开始运行了 当元素的父大小调整时( q)ResizeObserver),当其文本更改时,当添加了标记元素时 (单位:千美元)MutationObserver),当字体准备好时. pretty()实值text-wrap: pretty并且没有更多的。 没有小的多填:相当重整段 避免孤儿和被打乱的边缘, 和没有它包装的浏览器 与往常一样, 这是相当改善。 就这样 不需要任何东西, 警告什么也没有css.textWrap("pretty")你应当为Firefox而警告 它的内核是原始的CSS,&{text-wrap:pretty},因为没有什么可以掩盖 一种写作风格的警告.- 冲突. 两套
text-wrap(单位:千美元)cn()持有其中之一text-wrap*或者说white-space是一个建筑 错误.balance()'是源于它的内核,cssints: balance: kernel core sets text-wrap (this style also sets text-wrap)· ;pretty()生的内核不产生,所以一个条目列出它们:cssints: balance: it sets text-wrap (this style also sets text-wrap-style)。 。 。 .
限制
- 没有条件. 成员是内核的类,全球CSS,不能附加条件:
hover(pretty())或者说media(...)(balance())调用时的构建错误( i) ::hover wraps _balance-prettyCore, the marker of kernel balance.prettyCore, with no declaration of its own) (中文(简体) ). 在某种条件下,使用css.textWrap(...)(仅限本土). - 倒计时
max-width框中收窄,其中text-wrap: balance留着吧 居中文本 需求margin-inline: auto以元素为中心。 内含max-width由您自己覆盖. - 水平写入模式; 父程序不能从元素中大小( 缩写到适应的父程序可以循环)
与
ResizeObserver) (中文(简体) ).
cd packages/balance && bun run test # fixtures through the engine (kernel, fallback CSS by target, conflict)
cd packages/balance && bun run typecheck # and the type test
cd packages/balance && bun run test:browsers # Chrome, Firefox and WebKit through playwright-core
贷项
这个想法是 时间/文本平衡器 (Apache-2.0,纽约时报) 公司)和 反应- wrap- 平衡器 (麻省理工学院,舒鼎):找到最窄的 宽度,通过二进制搜索来保留行数,当父重排大小时。 剧本在这里写; 不 代码被复制.