当前位置： 首页 > news >正文

前端解决弹性容器设置“flex: 1”但内部的表格设置“text-overflow: ellipsis”却无法正常显示省略号的问题

news 2025/10/23 8:50:50

一、问题描述：

当表格列的内容文本长度过长，没有如预期显示省略号，且样式错乱，左侧内容消失了,因为右侧被撑开了,左侧因为空间不足被挤压

问题原因:

  • flex弹性子元素不会缩小到它的最小内容尺寸(指的是完整展示内容所需的最小宽度或高度)
  • 普通情况下默认min-width为auto(不会被压缩到小于内容的尺寸)
  • 但当overflow属性非visible时min-width为0(表示可以无限收缩,不被内容撑开),因此设置overflow属性或者设置width(min-width,width,max-width)就是解决问题的思路

问题代码：

.flex-box-right {
            flex: 1;
            background-color: green;
        }

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.page-container {min-height: 100vh;background: #e8edf7;padding-bottom: 50px;}.content {display: flex;width: 1200px;margin: 0 auto;justify-content: center;}.flex-box-left {width: 292px;flex: 0 0 292px;display: flex;flex-direction: column;justify-content: flex-start;background-color: orange;}.flex-box-right {flex: 1;background-color: green;/*overflow: hidden;max-width: 900px;*/}.custom-table {width: 100%;font-family: PingFang SC;font-size: 14px;border: 1px solid #e4e9f1;}.custom-tr {display: flex;}.custom-td {flex: 1 1 0%;height: 40px;line-height: 40px;text-align: left;padding-left: 16px;color: #60666e;border-bottom: 1px solid #e4e9f1;color: #60666e;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.custom-thead .custom-td {color: #30363e;background: #ecf1f9;font-weight: 500;}</style>
</head><body><div class="page-container"><div class="content mt-10"><div class="flex-box-left mt-10">left-content</div><div class="flex-box-right ml-10"><div class="custom-table"><div class="custom-thead"><div class="custom-tr"><div class="custom-td">项目</div><div class="custom-td">开始日期</div><div class="custom-td">结束日期</div><div class="custom-td">课程</div></div></div><div class="custom-tbody"><div class="custom-tr"><div class="custom-td">dwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwe</div><div class="custom-td">2020-01-01</div><div class="custom-td">2020-01-01</div><div class="custom-td">dwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwe</div></div></div></div></div></div>
</body></html>

二、解决方案

1.设置max-width

关键代码：

.flex-box-right {
            flex: 1;
            background-color: green;
            /*overflow: hidden;*/
            max-width: 900px;
        }

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.page-container {min-height: 100vh;background: #e8edf7;padding-bottom: 50px;}.content {display: flex;width: 1200px;margin: 0 auto;justify-content: center;}.flex-box-left {width: 292px;flex: 0 0 292px;display: flex;flex-direction: column;justify-content: flex-start;background-color: orange;}.flex-box-right {flex: 1;background-color: green;/*overflow: hidden;*/max-width: 900px;}.custom-table {width: 100%;font-family: PingFang SC;font-size: 14px;border: 1px solid #e4e9f1;}.custom-tr {display: flex;}.custom-td {flex: 1 1 0%;height: 40px;line-height: 40px;text-align: left;padding-left: 16px;color: #60666e;border-bottom: 1px solid #e4e9f1;color: #60666e;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.custom-thead .custom-td {color: #30363e;background: #ecf1f9;font-weight: 500;}</style>
</head><body><div class="page-container"><div class="content mt-10"><div class="flex-box-left mt-10">left-content</div><div class="flex-box-right ml-10"><div class="custom-table"><div class="custom-thead"><div class="custom-tr"><div class="custom-td">项目</div><div class="custom-td">开始日期</div><div class="custom-td">结束日期</div><div class="custom-td">课程</div></div></div><div class="custom-tbody"><div class="custom-tr"><div class="custom-td">dwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwe</div><div class="custom-td">2020-01-01</div><div class="custom-td">2020-01-01</div><div class="custom-td">dwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwe</div></div></div></div></div></div>
</body></html>

2.设置min-width或者width为0

关键代码：

.flex-box-right {
            flex: 1;
            background-color: green;
            min-width: 0;
        }

或者

.flex-box-right {

            flex: 1;

            background-color: green;

            width: 0;

        }

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.page-container {min-height: 100vh;background: #e8edf7;padding-bottom: 50px;}.content {display: flex;width: 1200px;margin: 0 auto;justify-content: center;}.flex-box-left {width: 292px;flex: 0 0 292px;display: flex;flex-direction: column;justify-content: flex-start;background-color: orange;}.flex-box-right {flex: 1;background-color: green;min-width: 0;}.custom-table {width: 100%;font-family: PingFang SC;font-size: 14px;border: 1px solid #e4e9f1;}.custom-tr {display: flex;}.custom-td {flex: 1 1 0%;height: 40px;line-height: 40px;text-align: left;padding-left: 16px;color: #60666e;border-bottom: 1px solid #e4e9f1;color: #60666e;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.custom-thead .custom-td {color: #30363e;background: #ecf1f9;font-weight: 500;}</style>
</head><body><div class="page-container"><div class="content mt-10"><div class="flex-box-left mt-10">left-content</div><div class="flex-box-right ml-10"><div class="custom-table"><div class="custom-thead"><div class="custom-tr"><div class="custom-td">项目</div><div class="custom-td">开始日期</div><div class="custom-td">结束日期</div><div class="custom-td">课程</div></div></div><div class="custom-tbody"><div class="custom-tr"><div class="custom-td">dwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwe</div><div class="custom-td">2020-01-01</div><div class="custom-td">2020-01-01</div><div class="custom-td">dwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwe</div></div></div></div></div></div>
</body></html>

3.设置overflow：hidden

overflow: auto有滚动条不介意的话也可以

关键代码：

.flex-box-right {
            flex: 1;
            background-color: green;
            overflow: hidden;
        }

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.page-container {min-height: 100vh;background: #e8edf7;padding-bottom: 50px;}.content {display: flex;width: 1200px;margin: 0 auto;justify-content: center;}.flex-box-left {width: 292px;flex: 0 0 292px;display: flex;flex-direction: column;justify-content: flex-start;background-color: orange;}.flex-box-right {flex: 1;background-color: green;overflow: hidden;/*max-width: 900px;*/}.custom-table {width: 100%;font-family: PingFang SC;font-size: 14px;border: 1px solid #e4e9f1;}.custom-tr {display: flex;}.custom-td {flex: 1 1 0%;height: 40px;line-height: 40px;text-align: left;padding-left: 16px;color: #60666e;border-bottom: 1px solid #e4e9f1;color: #60666e;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.custom-thead .custom-td {color: #30363e;background: #ecf1f9;font-weight: 500;}</style>
</head><body><div class="page-container"><div class="content mt-10"><div class="flex-box-left mt-10">left-content</div><div class="flex-box-right ml-10"><div class="custom-table"><div class="custom-thead"><div class="custom-tr"><div class="custom-td">项目</div><div class="custom-td">开始日期</div><div class="custom-td">结束日期</div><div class="custom-td">课程</div></div></div><div class="custom-tbody"><div class="custom-tr"><div class="custom-td">dwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwe</div><div class="custom-td">2020-01-01</div><div class="custom-td">2020-01-01</div><div class="custom-td">dwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwedwefewfewfewfewfewfewfewfewfwefwe</div></div></div></div></div></div>
</body></html>

http://www.dtcms.com/a/515965.html

相关文章：

  • 科大讯飞星火科技文献大模型 Spark-Scilit-X1-13B 在 GitCode 开源，助力科研智能化革新！
  • 网站建设较好的公司wordpress自定义类型模板
  • 国外设计网站d开头的免费的国产cad
  • k8s pod优雅下线实践
  • KeyValuePair 与 Dictionary
  • javascript `designMode`
  • Claude Code - AWS Skills
  • 照明灯具-图形识别更方便
  • 成都网站建设询q479185700上快网站版面
  • 【Linux】Centos替代方案
  • 猿辅导MySQL面试常见问题解析(一)
  • 【开题答辩全过程】以 基于大数据抖音用户行为分析的可视化大屏为例，包含答辩的问题和答案
  • 长春建站模板温州最牛叉的seo
  • 用 Python 给 Amazon 关键词搜索做“全身 CT”——可量产、可扩展的爬虫实战
  • 从“长音与鼓点”看雷达：连续波雷达与脉冲雷达的原理、公式与工程取舍
  • 未来的 AI 操作系统（八）——灵知之门：当智能系统开始理解存在
  • [人工智能-大模型-46]：AI时代，什么才是真正的创造者？
  • 【编辑器】一款IDE（如VSCode等） 如何解析各类文件大纲及跳转对应行
  • 如何将网站建设得更好包装设计作品集
  • TypeScript Number
  • Python 基础语法详解：从顺序到循环
  • wordpress建网站教程完整网站开发视频教程
  • 数据结构11:二叉树的数据类型和遍历方式
  • Nanomsg库CMakeLists.txt文件阅读笔记
  • 关于二叉树的一些算法题
  • 上下文工程实践：利用GLM-4.6和TRAE SOLO打造新粗野主义风格音乐创作网站
  • 在网站中添加百度地图注册自己的网站
  • 【基于CAPL进行TXT文件读取】—2.使用指令将读取的文件内容发送到trace
  • 一万个为什么：汉语词性对NLP的作用
  • Python开发：BackgroundTasks和asyncio.create_task()的区别