flex布局，文字隐藏不换行失效问题

墨紫剑

已于 2025-01-13 13:58:46 修改

阅读量238

点赞数 3

分类专栏： css 文章标签： css

于 2025-01-13 13:56:04 首次发布

本文链接：https://blog.youkuaiyun.com/h18794665197/article/details/145114276

版权

css 专栏收录该内容

1 篇文章

订阅专栏

当使用flex布局时，如果父元素设置了display: flex;且父元素的宽度没有设置，那么子元素可能会溢出父元素。这样的情况下，使用text-overflow: ellipsis;来实现文字隐藏的效果失效。

举一个例子，假设有一个父元素div，并且设置了display: flex。里面有多个子元素span，文字内容为"这是一段很长的文字"。

 <div style="display: flex;">
                <div>
                    <span v-if="!isShowTableOrechart" @click="isShowTableOrechart = !isShowTableOrechart">{{ cardValue
                        }}</span>
                    <el-select v-else @change="isShowTableOrechart = !isShowTableOrechart" v-model="cardValue"
                        placeholder="" size="small" style="width: 80px">
                        <el-option class="option" label="波形图" value="波形图" />
                        <el-option class="option" label="表格" value="表格" />  
                        <el-option class="option" label="button" value="button" />
                    </el-select>
                </div>
                <div class="topData" v-if="cardValue == '波形图'" style="margin-left:10px;">
                    <span style="margin:0 10px;">Y-min：<span style="color: #13ce66;">{{ mix }}</span></span>
                    <span style="margin:0 10px;">Y-max：<span style="color: #13ce66;">{{ max }}</span></span>
                    <span style="margin:0 10px;">X-min：<span style="color: #13ce66;">{{ y }}</span></span>
                    <span style="margin:0 10px;">X-max：<span style="color: #13ce66;">{{ y }}</span></span>
                    <span style="margin:0 10px;">▲Y：<span style="color: #13ce66;">{{ y }}</span></span>
                    <span style="margin:0 10px;">▲X：<span style="color: #13ce66;">{{ y }}</span></span>
                    <span style="margin:0 10px;">有效值：<span style="color: #13ce66;">{{ 0.55 }}</span></span>
                </div>
            </div>

然而，当你运行这段代码时，你会发现文字会完全显示出来，而没有被隐藏并显示省略号。这是因为flex布局下，text-overflow: ellipsis;不起作用。

解决这个问题的方法是给父元素添加width属性，且子元素的宽度设置为0，flex为1。这样，子元素不会超过父元素的宽度，文字就不会溢出了。

   <div style="display: flex;width: 100%;">
                <div>
                    <span v-if="!isShowTableOrechart" @click="isShowTableOrechart = !isShowTableOrechart">{{ cardValue
                        }}</span>
                    <el-select v-else @change="isShowTableOrechart = !isShowTableOrechart" v-model="cardValue"
                        placeholder="" size="small" style="width: 80px">
                        <el-option class="option" label="波形图" value="波形图" />
                        <el-option class="option" label="表格" value="表格" />  
                        <el-option class="option" label="button" value="button" />
                    </el-select>
                </div>
                <div class="topData" v-if="cardValue == '波形图'" style="margin-left:10px;flex: 1;width:0">
                    <span style="margin:0 10px;">Y-min：<span style="color: #13ce66;">{{ mix }}</span></span>
                    <span style="margin:0 10px;">Y-max：<span style="color: #13ce66;">{{ max }}</span></span>
                    <span style="margin:0 10px;">X-min：<span style="color: #13ce66;">{{ y }}</span></span>
                    <span style="margin:0 10px;">X-max：<span style="color: #13ce66;">{{ y }}</span></span>
                    <span style="margin:0 10px;">▲Y：<span style="color: #13ce66;">{{ y }}</span></span>
                    <span style="margin:0 10px;">▲X：<span style="color: #13ce66;">{{ y }}</span></span>
                    <span style="margin:0 10px;">有效值：<span style="color: #13ce66;">{{ 0.55 }}</span></span>
                </div>
            </div>

现在你再运行代码，你会发现文字成功被隐藏，并显示了省略号。