PostCSS 逻辑重叠流

npm install @csstools/postcss-logical-overflow --save-dev

PostCSS 逻辑重叠流 让您使用 overflow-inline 财务报告和审定财务报表 overflow-block 属性 CSS 过度流量规格。 。 。 .

.inline {
    overflow-inline: clip;
}

.block {
    overflow-block: scroll;
}

/* becomes */

.inline {
    overflow-x: clip;
}

.block {
    overflow-y: scroll;
}

使用量

添加 PostCSS 逻辑重叠流 对您的项目:

npm install postcss @csstools/postcss-logical-overflow --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssLogicalOverflow = require('@csstools/postcss-logical-overflow');

postcss([
    postcssLogicalOverflow(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

选项

内含直线

这个 inlineDirection 选项允许您指定内线轴的方向。 默认值为 left-to-right与任何拉丁语一致.

您应该调整此值, 使其适合您的语言和写作模式 .

postcssLogicalOverflow({
    inlineDirection: 'top-to-bottom'
})

.inline {
    overflow-inline: clip;
}

.block {
    overflow-block: scroll;
}

/* becomes */

.inline {
    overflow-y: clip;
}

.block {
    overflow-x: scroll;
}

每一方向必须是以下之一:

• top-to-bottom
• bottom-to-top
• left-to-right
• right-to-left