html+css不换行的解决办法

html+css不换行的解决方法

问题描述

**需求：**一级菜单较短，不用换行，二级菜单比较长需要换行。但是一级添加了强制不换行white-space: nowrap;导致二级也不换行。

需求效果图

解决方案

在二级上添加换行处理代码white-space: normal;

总结

white-space 是继承属性，千万要记住，别被坑了，好多同行和我一样误认为它是非继承属性，被它坑惨了。
附，详细说明链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

完整demo代码

<template>
<div class="ha">
    <ul class="ha_list">
        <li v-for="(item, index) in list" :key="index" class="ha_list_i">
            {{item.name}}
            <ol v-for="(item2, index) in item.children" :key="index" class="ha_list_i_list">
                <li class="ha_list_i_list_j">
                    {{item2.name}}
                </li>
            </ol>
        </li>
    </ul>
</div>
</template>

<script>
export default {
    data() {
        return {
            list: [{
                    name: '一级菜单较短不需要换行',
                    children: [{
                            name: '二级长菜单需要换行显示二级长菜单需要换行显示二级长菜单需要换行显示'
                        },
                        {
                            name: '二级长菜单需要换行显示二级长菜单需要换行显示二级长菜单需要换行显示'
                        },
                        {
                            name: '二级长菜单需要换行显示二级长菜单需要换行显示二级长菜单需要换行显示'
                        },
                        {
                            name: '二级长菜单需要换行显示二级长菜单需要换行显示二级长菜单需要换行显示'
                        },
                        {
                            name: '二级长菜单需要换行显示二级长菜单需要换行显示二级长菜单需要换行显示'
                        },
                        {
                            name: '二级长菜单需要换行显示二级长菜单需要换行显示二级长菜单需要换行显示'
                        },
                    ]
                },
                {
                    name: '一级菜单较短不需要换行'
                },
                {
                    name: '一级菜单较短不需要换行'
                },
            ]
        }
    },
}
</script>

<style lang="scss">
.ha {
    border: 1px solid #d2d4d6;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;

    &_list {
        display: flex;

        &_i {
            margin-right: 10px;
            background-color: #f2f2f2;
            padding: 4px 6px;
            white-space: nowrap;

            &:last-child {
                margin-right: 0;
            }

            &_list {
                display: flex;
                
                &_j {
                    margin-right: 10px;
                    background-color: #e2e2e2;
                    padding: 4px 6px;
                    margin-bottom: 10px;
                    display: flex;
                    flex-wrap: wrap;
                    white-space: normal;// 这里如果不设置就会继承一级菜单的设置
                    width: 300px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }
}
</style>

如果觉得有用，请点赞收藏让更多人的同行少走弯路，祝所有同行朋友，程序没bug！