flex 布局左侧固定右侧自适应超出内容隐藏，并保证布局效果

最新推荐文章于 2025-04-12 20:48:30 发布

王博wangbo

最新推荐文章于 2025-04-12 20:48:30 发布

阅读量3.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.csdn.net/weixin_41832017/article/details/106415639

css 专栏收录该内容

2 篇文章

订阅专栏

效果图：

注意点：
当右侧设置文本超出隐藏后，会影响整体页面布局，只需为右侧添加min-width数据即可。

代码： 以下是代码

<template>
  <div class="main-view">
    <div class="left-view">这是左侧</div>
    <div class="right-view">
      <div class="text-overflow-ellipsis">{{ testData }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      testData: '这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，'
    }
  }
}
</script>
<style lang="scss">
.main-view {
  width: 100%;
  height: 100vh;
  display: flex;
}
.left-view  {
  min-width: 100px;
  padding: 20px;
  width: 200px;
  height: 100%;
  background: skyblue;
}
.right-view {
  width: 100%;
  padding: 20px;
  flex-grow: 1;
  height: 100%;
  background: yellowgreen;
}
.text-overflow-ellipsis {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>