首页 > 编程学习记录 > 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-06-17
  • 沿汾河 一览众桥雄姿 2019-06-17
  • 设计众议院:新时代消费观念造就的全新第八代凯美瑞 2019-06-16
  • 动物园里迎端午 大熊猫爬上爬下吃“粽子” 2019-06-16
  • 石柱:县城市管理局赴三星乡划停车位规范场镇管理 2019-06-16
  • 美媒:朝电视台播放“金特会”纪录片 讲述口吻发生变化 2019-06-15
  • 马尔克斯:多年以后,奥雷连诺上校站在行刑队面前 2019-06-15
  • 全国政协“健全系统性金融风险防范体系”专题协商会 2019-06-15
  • 如何保持胃肠道健康年轻态 来听听这位消化科医生球迷的经验 2019-06-14
  • 西藏昂仁县:保障群众健康生活 用健康扶贫助推精准扶贫 2019-06-14
  • “一带一路”科研院所联盟成立大会在沈召开 2019-06-13
  • 西安高科工程技术学校——陕西省政府直属中等职业院校西安高科工程技术学校2018招生简章-陕西教育新闻 2019-06-13
  • 民生网——人民日报社《民生周刊》杂志官网 2019-06-13
  • 5月一线城市商品住宅销售价格同比下降 二线城市上涨 2019-06-12
  • 友情链接中国国家地理网 2019-06-12
  • 538| 947| 932| 930| 405| 719| 282| 797| 333| 372|