在CSS中有一个非常重要但对于初学者又非常容易忽略的属性:

  white-space:nowrap;  //文本不换行属性

这里附带说一下W3Cschool中对white-space的解释:

  white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

我要说的是其中用到最多的一个属性"nowrap",在文本中添加内容后,页面的缩放会引起文本不在同一行中显示

  那要如何解决这个问题呢?1.利用此属性便可轻松解决

              2.如果想要超出的文本以省略号的形式显示又如何操作呢?

                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space:nowrap;

            同时输入上述三行代码即可实现,注意:三行缺一不可!

  

CSS空白符处理!的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. 深入理解CSS中的空白符和换行

    前面的话 CSS3新增了两个换行属性word-wrap和word-break.把空白符和换行放在一起说,是因为实际上空白符是包括换行的,且常用的文本不换行是使用的空白符的属性white-space: ...

  3. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. CSS 3学习——文本效果和@font-face

    文本效果 关于文本效果,这里仅仅记录得到大多数浏览器支持的几个属性,分别是: text-overflow text-shadow word-break word-wrap text-overflow ...

  6. CSS权威指南之css声明,伪类,文本处理--(简要笔记一)

    1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒.   3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...

  7. css单行文本与多行溢出文本的省略号问题

    在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...

  8. css揭秘--笔记(未完)

    第0章 关于本书 1, 本书要用到一个工具函数————$$(),它可以让我们更容易获取和遍历所有匹配特定css选择符的dom元素: function $$(selector,context){ con ...

  9. css权威指南--笔记

    第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate styleshee ...

随机推荐

  1. 1854: [Scoi2010]游戏

    1854: [Scoi2010]游戏 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 2538  Solved: 905[Submit][Status] ...

  2. .dll 无法查找或者打开PDB文件

    https://www.baidu.com/link?url=XBkzyMPU8bmyHSKAvBde6955fX2ecFJXfk8D44_VCuH_4U04E0bHFjk8D2_mXSqgjcUyQ ...

  3. linux CentOS6.5 安装SVN & 可视化管理工具iF.SVNAdmin

    转:http://tanghenxin.lofter.com/post/1cc667b3_5ac50dc 实际系统环境: CentOS 6.5 x64 一.安装Apache 通常系统都已经装好了,但我 ...

  4. (22)Properties,这不会Io流中的类,但是通常和IO流中的一些流配合使用

    可以和流相关联的集合对象Properties. Map |--Hashtable |--Properties Properties:该集合不需要泛型,因为该集合中的键值对都是String类型.既然是m ...

  5. ubuntu查看安装的cuda toolkit自带的工具及其他安装文件

    原创作品,转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5253672.html 1.查看工具 默认目录为:local,进入local:cd /usr/loc ...

  6. Python快速入门(5)

    os模块:操作系统接口 应该用 import os 风格而非 from os import * .这样可以保证随操作系统不同而有所变化的 os.open() 不会覆盖内置函数 open() 在使用一些 ...

  7. jQuery中jsonp函数实现

    由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据.因此出现了浏览器跨域请求数据问题. Jsonp是解决跨域问题的一个非常流行的方法. JSONP(JSON with Pad ...

  8. Android Doze模式启用和恢复

    从Android 6.0(API level 23)开始,Android提出了两个延长电池使用时间的省电特性给用户.用户管理可以在没有充电的情况下管理app的行为.当用户一段时间没有使用手机的时候,D ...

  9. 2017-3-28 javaScript DOM 操作

    一.DOM的基本概念:DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化得东西. 二.Windows  对象操作:1.属性和方法:属性(值或者子对象):o ...

  10. python学习随笔(三)

    在linux中输入密码,我们是看不到的,如果在python中直接输入是可以看的到的,执行以下程序 #!/usr/bin/env python username = raw_input("us ...