DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
inline-size
是一个 逻辑属性,它在写作模式为水平时定义元素的宽度,或在writing-mode
为垂直时定义元素的高度。
.element {
inline-size: 700px;
writing-mode: vertical-lr;
}
正如您可能从上面的示例中猜到的那样,writing-mode
属性通过 90 度改变文本和布局流的方向。您可能希望这样做有两个主要原因。
首先,作为设计选择,您可能希望在一个元素上显示垂直文本,例如标题
第二个——可能是最重大的——您可能希望使用inline-size
之类的逻辑属性的原因是适应网站的国际化。许多东亚文字,例如中文、日语和韩语可以横向或纵向书写。使用逻辑属性,我们可以根据用户的写作模式提供元素的正确大小方向。
Jen Simmons 有一篇关于 CSS 写作模式的 文章 和 演示 ,可以更深入地了解 CSS 写作模式。
width
属性?
为什么不能只使用老式的可靠的您可以!但是,如果您担心内容的上下文会根据用户的语言而改变,那么您可能希望使用inline-size
而不是 width
。width
是一个物理尺寸,因此当写作模式发生改变时,元素会保持其水平宽度大小,当它设置为垂直时,会破坏布局。逻辑属性,如 inline-size
,可以响应这些变化,并在正确方向应用宽度。
例如,如果段落元素使用宽度为 400 像素,当写作模式设置为vertical-lr
时,内容将旋转,改变布局,但该段落将保持 400 像素的宽度,而不是 400 像素的高度。
看到了吗?好吧,inline-size
很聪明!它根据writing-mode
的值从宽度更改为高度。
语法
inline-size: <'width'>
- 初始值:
auto
- 应用于:与
height
和width
相同 - 继承:否
- 百分比:与相应的物理属性相同
- 计算值:与
height
和width
相同 - 动画类型:通过计算值类型
值
/* Length values */
inline-size: 250px;
inline-size: 5rem;
/* Percentage values */
inline-size: 75%;
/* Keyword values */
inline-size: auto;
inline-size: fit-content(5rem);
inline-size: max-content;
inline-size: min-content;
/* Global values */
inline-size: inherit;
inline-size: initial;
inline-size: unset;
auto
: 元素的内联大小将符合其父元素的大小。fit-content()
: 此函数允许容器增长到所需大小,然后使文本换行,有效地将内容钳制到提供的大小值。它可以在网格容器上使用,以及盒子大小,并且虽然 caniuse 显示该函数与 inline-size 有很强的支持,但我们的测试结果不太确定。这可能是由于盒子大小模块第 3 级规范的草案状态。max-content
: 内在首选宽度,意味着元素将文本尽可能地拉伸,并使盒子与文本一样长。min-content
: 内在最小宽度,意味着元素的盒子缩减到其内容的最小尺寸。盒子将是最大文本字符串的大小。
演示
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 79+ | 41+ | 57 | 12.1+ | 44+ |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
85+ | 79+ | 81+ | 12.2+ | 59+ |
请注意,使用以下函数的支持可能与属性的支持不同
更多信息
- CSS 逻辑属性和值级别 1 规范 (编辑草案)
- MDN 文档
- CSS 逻辑属性 (CSS-Tricks)
- 了解逻辑属性和值 (Smashing Magazine)
- CSS 逻辑属性 (Adrian Roselli)
- CSS 网格中的最小和最大内容大小 (Jen Simmons,视频)
- CSS 中的双向水平规则 (Hussein Al Hammad)