溢出 css_CSS溢出示例说明

溢出 css

The overflow property controls what happens if an element's content overflows from its set width and height. It is shorthand for the overflow-x and overflow-y properties. Note that this property only works for block elements with a specified height.

overflow属性控制元素内容从其设置的宽度和高度溢出时发生的情况。 它是overflow-x和overflow-y属性的简写。 请注意，此属性仅适用于具有指定高度的块元素。

With overflow, you can control whether to clip content or add scrollbars when an element’s content is too big to fit in a specified area.

使用overflow ，您可以控制是剪辑内容还是在元素的内容太大而无法放入指定区域时添加滚动条。

价值观 (Values)

• visible: This is the default value of the property. No content is clipped when it's bigger than its set dimensions.

  visible ：这是属性的默认值。 如果内容大于设置的尺寸，则不会剪切任何内容。

• hidden: Content that overflows is hidden.

  hidden ：溢出的内容被隐藏。

• scroll: Content is hidden, but users can still scroll through and view the hidden content.

  scroll ：内容是隐藏的，但是用户仍然可以滚动浏览并查看隐藏的内容。

• auto: If content is bigger than its set dimensions, content will be hidden automatically and a scrollbar will appear.

  auto ：如果内容大于其设置的尺寸，则内容将自动隐藏，并出现滚动条。

• initial: Uses the default value for this property, visible.

  initial ：使用此属性的默认值visible 。

• inherit: Uses the overflow value of the parent element.

  inherit ：使用父元素的溢出值。

例子 (Examples)

Here is the HTML and CSS we'll use for all the following examples:

这是我们将用于以下所有示例HTML和CSS：

<div class="box-element">
  <p>
    Who's the baby cats are fats i like to pets them they like to meow back. Attack the dog then pretend like nothing happened kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff, see owner, run in terror. Rub face on everything cats are the world. Meow meow, i tell my human i rule on my back you rub my tummy i bite you hard the best thing in the universe is a cardboard box if it smells like fish eat as much as you wish and carefully drink from water glass and then spill it everywhere and proceed to lick the puddle. Paw at beetle and eat it before it gets away rub butt on table for chew foot, or love you, then bite you and pounce on unsuspecting person. What a cat-ass-trophy! cat slap dog in face let me in let me out let me in let me out let me in let me out who broke this door anyway for prance along on top of the garden fence, annoy the neighbor's dog and make it bark and chew iPad power cord purr.
  <p>
</div>

.box-element {
  width: 400px;
  height: 200px;
  border: dashed;
}

.box-element {
  /* overflow will be set here */
}

可见： (Visible:)

.box-element {
  overflow: visible;
}

隐： (Hidden:)

.box-element { 
  overflow: hidden; 
}

滚动： (Scroll:)

.box-element { 
  overflow: scroll; 
}

汽车： (Auto:)

.box-element { 
  overflow: auto; 
}

溢出x和溢出y (overflow-x and overflow-y)

• overflow-x: Allows the user to scroll through the content that extends beyond the height of the box element.

  overflow-x ：允许用户滚动浏览超出box元素高度的内容。

• overflow-y: Allows the user to scroll through the content that extends beyond the width of the box.

  overflow-y ：允许用户滚动超出框的宽度的内容。

.box-element {
  overflow-x: scroll;
  overflow-y: auto;
}

And the .box-element will look like this:

.box-element将如下所示：

If the content overflows the Y-axis, then that content will be hidden, whilst a scrollbar should be visible for users to read the rest of the content.

如果内容溢出Y轴，则该内容将被隐藏，而滚动条应可见，以便用户阅读其余内容。

翻译自: https://www.freecodecamp.org/news/css-overflow-explained-with-examples/

溢出 css