内容超出宽度 实现横向滚动条

    <div class="content">
        <p>你哈哈哈哈换行你哈哈哈哈你哈哈哈哈换行你哈哈哈哈</p>
        <p>你哈哈哈哈换行你你哈哈哈哈换行</p>
        <p>你哈哈哈哈换行</p>
    </div>

        .content{
            width:300px;
            overflow-x: auto;
        }

默认使用 overflow-x：auto; 使用无效

 

这是因为浏览器默认文本内容超出容器时自动换行导致的，

解决：

        .content{
            width:300px;
            overflow-x: auto;
            white-space: nowrap;
        }

添加white-space:nowrap；默认不换行即可

效果图：