在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. KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-handlebars

    koahub-handlebars koahub-handlebars koahub handlebars templates Installation $ npm install koahub-ha ...

  2. (1)写给Web初学者的教案-----学习Web的知识架构

    1:学习Web的知识架构 前文中我们简单的介绍了一些关于Web的基本知识,这里任老师再次强调一下凡是用浏览器打开的网站我们就称之为Web应用程序(B/S结构).除此之外其它需要下载安装的软件或是手机  ...

  3. 使用Git将本地仓库与GitHub远程仓库相关联

    这篇文章详细讲解了如何生成SSH,并链接到GitHub,123..... 1.如果你的GitHub里面没有仓库,就自己生成一个,如图所示 2.如果你有自己仓库,想在电脑本地新建一个,你需要将GitHu ...

  4. 使用spring webflow,在前台页面中如何显示后端返回的错误信息

    刚刚接触spring webflow,相关的资料并不是很多,并且大都是那种入门的 .xml文件的配置. 用到的CAS 最新的4.0版本用的就是web-flow流,前台页面使用的是表单提交.于是我就碰到 ...

  5. ps-修复

    1-    复制图层 2-    工具栏——套索——多变套索工具——上侧工具栏——羽化(15像素) 选区,防止其他区域被修改        羽化,让修改的边缘柔和化 3-    选项区——编辑——填充 ...

  6. Android权限解释

    属性 说明 android.permission.ACCESS_CHECKIN_PROPERTIES 允许读写访问 "properties"表在checkin数据库中,改值可以修改 ...

  7. 【一】Swift 3.0 新浪微博项目实战 -整体框架搭建

    最近要接手swift,所以找了个视频跟着做一下实战项目,在此记录一下过程和心得 框架搭建和目录拆分 关键词:MVVM 架构,桥接文件 桥接文件用于引入OC的头文件,Swift就可以正常使用(宏除外). ...

  8. centos7 安装kubernetes1.4

    192.168.251.9 master192.168.251.231 node 建议可以搭建etcd集群来做数据库存储,并搭建kube-dns,然后把k8s的日志落地到/var/log/kubern ...

  9. redis 3.2 报错 Redis protected-mode 配置文件没有真正启动

    (error) DENIED Redis is running in protected mode because protected mode is enabled Redis protected- ...

  10. maven修改远程和本地仓库地址

    简介:我们用maven的时候,maven自带的远程中央仓库经常会很慢,还有默认本地仓库是在c盘C:\Users\你的电脑用户账号\.m2\repository, 对于有强迫症的人,总是看的不爽,下面介 ...