‘overflow-block’和‘overflow’(和‘block-overflow’)有什么区别?

问题描述 投票:0回答:2

来自文档: 溢出

overflow 简写 CSS 属性设置当元素的内容太大而无法适应其块格式上下文时要执行的操作。

溢出块

overflow-block CSS 属性设置当内容溢出块级元素的块开始和块结束边缘时显示的内容。

这是否意味着

overflow-block
仅适用于块元素?

起初,我以为

overflow-block
会类似于 block-overflow 但这里的情况并非如此。

css overflow
2个回答
0
投票

太棒了; overflow-block/inline根据写入模式映射到overflow-x/y。在撰写本文时,它们尚未得到广泛支持

溢出(溢出-x / 溢出-y)

溢出可能发生在盒子的左侧/右侧,或盒子的顶部/底部。这些行为可以通过 overflow-xoverflow-y 单独指定。

overflow-x
定义框的左/右侧的溢出行为,
overflow-y
定义框的顶部/底部,其中 overflow 允许您指定两个轴的溢出行为。

溢出-块/溢出-内联

但是,在某些情况下,您可能会引入垂直书写模式(一个常见的例子是使用中文/日语/韩语时,两种书写模式都有意义。)这就是

overflow-inline
overflow-block
发挥作用的时候方便:

overflow-inline
指定块的内联轴。这是你阅读文本的方向。这意味着当您使用默认的水平书写模式时,它映射到
overflow-x
,而当您使用垂直书写模式时,它映射到
overflow-y
。类似地,
overflow-block
指定块轴,它映射水平书写模式的
overflow-y
和垂直书写模式的
overflow-x
。这意味着切换书写模式时不需要切换
overflow-x/y
的值。

块溢出(块省略)

block-overflow
的目的完全不同。请注意,它目前仍处于草案阶段,并已重命名为 block-ellipsis。根据规格:

此属性允许在(强制或非强制)区域中断之前将内容插入到最后一个行框中,以指示截断/中断内容的连续性。

这意味着您可以将

...
(to be continued)
之类的内容插入到溢出块的末尾,这与
line-clamp
(目前也在草稿中)配合得很好。


-2
投票

不,overflow-block 字面意思是用来阻止元素的溢出属性。您可以使用评论部分中给出的示例链接

© www.soinside.com 2019 - 2024. All rights reserved.