网站首页 程序人生 资源汇 学建站 源码 织梦模板 特效代码 技术手册 IT头条 电商 创业 运营 站长

特色栏目 视频下载 织梦模板 教程书籍 职业生涯 正能量 美图

CSS white-space norma nowrap强制同一行内显示所有文本收藏挑错

2018-09-27 09:43 采编:程序人生 阅读 投稿赚币
white-space norma nowrap强制同一行内显示所有文本文字,让所有文字内容中一排显示不换行。 让文字不自动换行,无论CSS宽度设置多少,所有文字都在一行内显示。特别是标题列表,我们想
  white-space norma nowrap强制同一行内显示所有文本文字,让所有文字内容中一排显示不换行。

  让文字不自动换行,无论CSS宽度设置多少,所有文字都在一行内显示。特别是标题列表,我们想一行只显示一条标题内容,而有时宽度有限标题文字多了width(宽度)又有限,这样会造成文字自动换行,这个时候我们可以使用white-space样式让他一排显示不换行,当然我们为了隐藏超出的文字内容我们可以再加一个css overflow:hidden样式。

  一、white-space语法与结构

  1、white-space语法:

  white-space : normal nowrap

  2、white-space参数:

  normal :  默认处理方式

  nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。

  3、white-space说明:

  white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容,通常我们使用white-space:nowrap强制文本文字内容不换行,在对象内一行显示完所有文字内容。

  二、white-space实践案例

  我设置2个对象盒子,一个设置强制同行显示文本内容。第二个设置强制同行显示,但使用html br标签观察效果。为了white-space案例应用效果,我设置css宽度一定120px,css高度为60px,css行高 line-height为20px 。

  1、css代码
  <style>

  div{ width:120px; height:60px; line-height:20px}

  .divcss5{ white-space:nowrap}

  </style>

  2、html代码片段
  <div class="divcss5">内容将在一行内强制显示完整</div>

  <div class="divcss5">内容使用br换行<br />

  将会不被<br />换行显示</div>

  3、white-space实例截图

    CSS white-space norma nowrap强制同一行内显示所有文本不换行

  三、white-space总结

  日常我们为了让文字内容在一行内显示完,哪怕宽度不够也不能换行,我们可以使用white-space样式,但如果遇到了html br强制换行标签,无论是设置white-space与否都会被<br>强制换行。
相关标签:
程序人生if98.com,专注IT人成长、所需、职场,欢迎参与撰稿、分享资源!

扫一扫关注程序人生公众号

免责声明:本文内容由[程序人生]用户自行发布或编辑转载,本站不拥有所有权、不承担相关法律责任。 如发现有涉嫌抄袭的内容,可邮件 web@if98.com 举报,并提供证据,一经查实,本站将立刻删除涉嫌侵权内容。

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片

站长推荐文章

阅读排行

论坛信息推荐 更多 >>

关于我们

微信公众号

扫码关注官方微信

返回顶部