首页 > 编程学习记录 > white-space:nowrap实现让文字不换行

201511月15

white-space:nowrap实现让文字不换行

作者:admin 0 Comments 发表评论

山东时时彩十一选五 www.zqojk.com.cn 今天写超级购的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图

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

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

本文目前尚无任何评论.

发表评论

  • 梨子的滋味说不清楚就要亲口偿偿,什么不提倡在一些省搞社会主义,在一些省搞自由市场经济呢,却把这一理念转移方向呢? 2019-04-21
  • 江苏要求在中小学普及编程教育 为人工智能发展培养人才 2019-04-21
  • 马克思主义,不会改变人类历史发展的进程和规律,它只是揭示了这个不可更改的客观规律。人类社会发展的进程,只决定于工人阶级的觉悟。现在是工人阶级丧失了革命觉悟的时期 2019-04-21
  • 莆田市:构建1536多元化解体系 实现线上线下全域覆盖 2019-04-21
  • 80亩山林被“剃光头” 森林公安半年未结案 2019-04-20
  • 夏季肠道容易“中风” 2019-04-20
  • 火爆!可兰白克两引冲突掀翻对手 杜锋直接换他下场 2019-04-20
  • 习近平日内瓦演讲一周年世界为何青睐"人类命运共同体" 2019-04-20
  • 承载历史使命的 “乡村振兴”,城乡共同参与 2019-04-19
  • 嘱望上合 青岛之约 2019-04-19
  • [微笑]那就是管理问题了,跟免不免费本身不相干! 2019-04-19
  • 六一记忆:不同的年代 同样的快乐 2019-04-18
  • 中青报:“三天朋友圈可见”的背后 2019-04-18
  • 你反来复去说1+1=2,真痴呆了?你应该讲点其他的吧,譬如,1+1=2,是客观事实还是规律,是真理还是谬误。 2019-04-18
  • 新时代 新气象 新作为 学习宣传贯彻党的十九大精神 2019-04-17
  • 747| 120| 921| 530| 998| 964| 463| 632| 100| 885|