css - 为什么设置overflow:hidden 屏幕变小后换行?

Question

<style>

.row{
width:auto;
overflow:hidden;
height:80px;
margin-left:10px;
margin-top:20px;
border:1px solid red;

}

</style>
<p class="row">

<span>这是行内快</span>  输入框： <input type="text"><select name="" id="">
                        
                        <option value="请选择" selected="selected">地址1</option>
                    </select>
                    <select id="">
                        <option value="">
                            1
                        </option>
                    
                        <option value="请选择" selected="selected">地址2</option>
                    </select>
                    <select  name="">
                        
                        <option value="请选择" selected="selected">杭州</option>
                    </select>
                    <span>aa</span>
                    <select id="" name="">
                    
                        <option value="请选择" selected="selected">请选择</option>
                    </select>
                    <span>姓名</span>
                    <input id="" type="text" name="">
                    <button id=""  type="submit">
                        <span class="">按钮</span>
                    </button>

</p>

屏幕变小换行为什么不隐藏？

Answer 1

你.row里面都是行内元素，所以它会自动换行的，如果里面是块级元素（非浮动）的话他就不会换行

Answer 2

你要实现的应该是一行显示同时隐藏溢出的部分吧？
试一下这个，希望对你有帮助

.row {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

Answer 3

给个最小宽度

Answer 4

经测试，不是人家不隐藏，是你的height设置的比较高，还不到隐藏的地步，你把高度设小了，就隐藏了

Answer 5

宽度没设置吧~宽度auto了，那还不随着窗口变化而变化