CSS空白符处理!
在CSS中有一个非常重要但对于初学者又非常容易忽略的属性:
white-space:nowrap; //文本不换行属性
这里附带说一下W3Cschool中对white-space的解释:
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
我要说的是其中用到最多的一个属性"nowrap",在文本中添加内容后,页面的缩放会引起文本不在同一行中显示
那要如何解决这个问题呢?1.利用此属性便可轻松解决
2.如果想要超出的文本以省略号的形式显示又如何操作呢?
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
同时输入上述三行代码即可实现,注意:三行缺一不可!
CSS空白符处理!的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 深入理解CSS中的空白符和换行
前面的话 CSS3新增了两个换行属性word-wrap和word-break.把空白符和换行放在一起说,是因为实际上空白符是包括换行的,且常用的文本不换行是使用的空白符的属性white-space: ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- CSS 3学习——文本效果和@font-face
文本效果 关于文本效果,这里仅仅记录得到大多数浏览器支持的几个属性,分别是: text-overflow text-shadow word-break word-wrap text-overflow ...
- CSS权威指南之css声明,伪类,文本处理--(简要笔记一)
1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...
- css单行文本与多行溢出文本的省略号问题
在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...
- css揭秘--笔记(未完)
第0章 关于本书 1, 本书要用到一个工具函数————$$(),它可以让我们更容易获取和遍历所有匹配特定css选择符的dom元素: function $$(selector,context){ con ...
- css权威指南--笔记
第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate styleshee ...
随机推荐
- KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-handlebars
koahub-handlebars koahub-handlebars koahub handlebars templates Installation $ npm install koahub-ha ...
- (1)写给Web初学者的教案-----学习Web的知识架构
1:学习Web的知识架构 前文中我们简单的介绍了一些关于Web的基本知识,这里任老师再次强调一下凡是用浏览器打开的网站我们就称之为Web应用程序(B/S结构).除此之外其它需要下载安装的软件或是手机 ...
- 使用Git将本地仓库与GitHub远程仓库相关联
这篇文章详细讲解了如何生成SSH,并链接到GitHub,123..... 1.如果你的GitHub里面没有仓库,就自己生成一个,如图所示 2.如果你有自己仓库,想在电脑本地新建一个,你需要将GitHu ...
- 使用spring webflow,在前台页面中如何显示后端返回的错误信息
刚刚接触spring webflow,相关的资料并不是很多,并且大都是那种入门的 .xml文件的配置. 用到的CAS 最新的4.0版本用的就是web-flow流,前台页面使用的是表单提交.于是我就碰到 ...
- ps-修复
1- 复制图层 2- 工具栏——套索——多变套索工具——上侧工具栏——羽化(15像素) 选区,防止其他区域被修改 羽化,让修改的边缘柔和化 3- 选项区——编辑——填充 ...
- Android权限解释
属性 说明 android.permission.ACCESS_CHECKIN_PROPERTIES 允许读写访问 "properties"表在checkin数据库中,改值可以修改 ...
- 【一】Swift 3.0 新浪微博项目实战 -整体框架搭建
最近要接手swift,所以找了个视频跟着做一下实战项目,在此记录一下过程和心得 框架搭建和目录拆分 关键词:MVVM 架构,桥接文件 桥接文件用于引入OC的头文件,Swift就可以正常使用(宏除外). ...
- centos7 安装kubernetes1.4
192.168.251.9 master192.168.251.231 node 建议可以搭建etcd集群来做数据库存储,并搭建kube-dns,然后把k8s的日志落地到/var/log/kubern ...
- redis 3.2 报错 Redis protected-mode 配置文件没有真正启动
(error) DENIED Redis is running in protected mode because protected mode is enabled Redis protected- ...
- maven修改远程和本地仓库地址
简介:我们用maven的时候,maven自带的远程中央仓库经常会很慢,还有默认本地仓库是在c盘C:\Users\你的电脑用户账号\.m2\repository, 对于有强迫症的人,总是看的不爽,下面介 ...