css样式笔记

空间不够时，强制盒模型不换行

案例演示

<scroll-view scroll-x enable-flex class="navScroll"> 
<view class="navItem">
<view class="navContent">
推荐
</view>
</view>
<view class="navItem">
<view class="navContent">
万有引力
</view>
</view>
<view class="navItem">
<view class="navContent">
推荐
</view>
</view>
<view class="navItem">
<view class="navContent">
万有引力
</view>
</view>
<view class="navItem">
<view class="navContent">
推荐
</view>
</view>
<view class="navItem">
<view class="navContent">
万有引力
</view>
</view>
<view class="navItem">
<view class="navContent">
推荐
</view>
</view>
<view class="navItem">
<view class="navContent">
万有引力
</view>
</view>
<view class="navItem">
<view class="navContent">
推荐
</view>
</view>
<view class="navItem">
<view class="navContent">
万有引力
</view>
</view>
<view class="navItem">
<view class="navContent">
推荐
</view>
</view>
<view class="navItem">
<view class="navContent">
万有引力
</view>
</view>
<view class="navItem">
<view class="navContent">
推荐
</view>
</view>
<view class="navItem">
<view class="navContent">
万有引力
</view>
</view>
<view class="navItem">
<view class="navContent">
推荐
</view>
</view>
<view class="navItem">
<view class="navContent">
万有引力
</view>
</view>
<view class="navItem">
<view class="navContent">
推荐
</view>
</view>
<view class="navItem">
<view class="navContent">
万有引力
</view>
</view>
<view class="navItem">
<view class="navContent">
推荐
</view>
</view>
<view class="navItem">
<view class="navContent">
万有引力
</view>
</view>
<view class="navItem">
<view class="navContent">
推荐
</view>
</view>
<view class="navItem">
<view class="navContent">
万有引力
</view>
</view>
<view class="navItem">
<view class="navContent">
推荐
</view>
</view>
<view class="navItem">
<view class="navContent">
万有引力
</view>
</view>
</scroll-view>

注:通过图片结果可以看到文字排列换行了，这是由于空间不够。

解决一下文字换行问题

 white-space: nowrap;//不让他往下换行

在css上对这个类选择器进行样式添加。

注:最终文本都在一行了