前端 flex弹性布局之弹性布局中文换行_flex 布局如何截断中文换行

作者：很楠不爱3 | 2024-03-14 13:54:27

踩

flex 布局如何截断中文换行

阮一峰布局语法： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 布局实例篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

<div style="background: green; display: flex;">
        <div style="flex-basis: auto; white-space: nowrap; background: red; ">我是第一</div>
        <div style="width: 100%; background: #0f0;">66666</div>
</div>1
2
3
4

这里写图片描述

在此不讲flex布局语法跟实例，请参考以上 阮一峰 老师的教程。
主要提醒大家注意：在使用弹性布局的时候，如果div内部写的是中文，会导致内部换行，请给换行的div加一个 white-space: nowrap; 属性。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/234962

前端 flex弹性布局之弹性布局中文换行_flex 布局 如何截断中文 换行

前端 flex弹性布局之弹性布局中文换行_flex 布局如何截断中文换行