一、简介

overflow: hidden 是 CSS 中用于控制元素内容溢出行为的属性。当一个元素的内容超出其指定的宽度和高度时，overflow: hidden 会将溢出的部分隐藏，而不是显示滚动条或让内容溢出到容器外部。

给第二个元素添加 overflow: hidden，效果类似 min-width，但是多余的部分被遮挡了

二、示例

示例

overflow 对 Flex 布局的影响

<template>
  <el-row>
    <el-col :span="6">操作第2个元素：</el-col>
    <el-col :span="18">
      <el-radio-group v-model="selectedOption">
        <el-radio label="1">添加 overflow: hidden</el-radio>
        <el-radio label="0">移除 overflow: hidden</el-radio>
      </el-radio-group>
    </el-col>
  </el-row>

  <div class="flex-container">
    <div class="flex-item">The quick brown fox jumps over the lazy dog</div>
    <div :class="overflowClass">
      Life is like a box of chocolateschocolates, you never know what you're
      gonna get
    </div>
    <div class="flex-item">To be or not to be, that is the question</div>
    <div class="flex-item">All that glitters is not gold</div>
    <div class="flex-item">
      A journey of a thousand miles begins with a single step
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

let selectedOption = ref("0");
let overflowClass = computed(() => {
  return selectedOption.value === "1" ? "flex-item overflowClass" : "flex-item";
});
</script>

<style scoped>
.flex-container {
  display: flex;
  background-color: #f0f0f0;
  padding: 10px;
  margin-top: 20px;
}

.flex-item {
  background-color: #ddd;
  color: #5086a1;
  font-size: 16px;
  font-weight: 600;
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
}
.overflowClass {
  overflow: hidden;
}
</style>

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24