九州体育网址备用 > 编程学习记录 > 九州体育网址备用|九州体育最新网址|九州体育app网址-足球比分投注

201511月15

九州体育网址备用|九州体育最新网址|九州体育app网址-足球比分投注

作者:admin 0 Comments 发表评论

今天写超级购的CSS属性,遇到个问题,就是在手机上显示的时候,和电脑上显示的不太相同,电脑上,说明文字和下方的表格都是全屏展示,但在手机上展示的时候,说明文字自动换行了:

手机上的展示图样

而我想文字也只显示一点,跟表格一样是往右拖再看后面的内容的!

后面通过群里网友的指点,说是只要在样式里添加上:

white-space:nowrap

属性就可以了。测试以后,果然实现了效果,上面的说明文字不会再自动换行了。

百度了下这个属性的说明,很多说法,不过有一条应该是比较准确的:

当你不想让块内的文字换行时,就可以用这个属性。

比如下面的例子:

<!–当外层容器设置了宽度而你又不希望内层内容换行时–>
<div style = ‘width:100px;’>
<p style = ‘white-space:nowrap;’>
神马都是浮云神马都是浮云神马都是浮云神马都是浮云神马都是浮云神马都是浮云神马都是浮云
</p>
</div>

因为设置了DIV块的宽度为100像素,所以如果上面的代码中,没有“white-space:nowrap”这个样式限制,那么里面的文字会因为宽度不够而自动换行,但如果添加了这个样式限制,那么就不会管DIV宽度的限制了,一直在一行显示下去,如果不想让超出DIV范围的内容显示,还要添加一个溢出样式限制,比如:“overflow: hidden”。

通过两个图来说明,第一幅是没有添加“white-space:nowrap”限制的,第二幅是添加了“white-space:nowrap”样式限制的:

1图2图

推荐阅读相关文章:编程学习记录

本文地址:/white-spacenowrap.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

本文目前尚无任何评论.

发表评论

,