1.前言
overflow 属性用于设置当元素的内容溢出其框时如何处理。
2. overflow
overflow 属性的一些常见值:
1 visible:默认值。内容不会被剪裁,会溢出元素的框。
2 hidden:内容会被剪裁,不会显示溢出的部分。
3 scroll:内容会被剪裁,但会显示滚动条,无论内容是否溢出。
4 auto:如果内容溢出,则显示滚动条,否则不显示。
5 clip:内容会被剪裁,但不会显示滚动条。
6 inherit:从父元素继承 overflow 属性的值。
7 initial:将 overflow 属性设置为默认值。
8 unset:将 overflow 属性设置为继承父元素的值,如果没有继承父元素,则设置为初始值。
常用的属性
.example {
overflow: hidden; /* 隐藏溢出的内容 */
overflow: scroll; /* 如果内容溢出,则显示滚动条 */
overflow: auto; /* 如果内容溢出,则显示滚动条,否则不显示 */
}
3. overflow: visible
设置元素的溢出行为为可见overflow: visible;
<template>
<div class="visible-overflow">
这是一个溢出行为为可见的 div
</div>
</template>
<style>
.visible-overflow {
overflow: visible;
}
</style>
style绑定
<template>
<div :style="{ overflow: 'visible' }">
这是一个溢出行为为可见的 div
</div>
</template>