CSS空白符处理!

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

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

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

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

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

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

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

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

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

  

时间: 2024-10-10 00:33:04

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

css 文本换行,文本空白符处理相关

.message .text { display: block; border-radius:10px; width: 223px; height: auto; padding: 11px 20px 19px 17px; font-size:14px; color:#4a4a4a; float: left; resize: none; word-break: break-all;/*自动换行*/ word-wrap: break-word;/*以单词换行*/ white-space: pre-w

CSS属性

CSS样式属性 一.字体 1.font-family:Tahoma,Arial,"Hiragino Sans GB";字体,第一种字体不能显示时,用第二种字体 2.font-size:xx-small or 10px字体大小:绝对大小:xx-small.x-small.medium.large.x-large.xx-large.x-large.xx-l相对大小:large smaller 使用数字和度量单位绝对单位:px:显示器像素个数mm.cm.in:毫米 厘米 英寸,使用这类单位,

每天CSS学习之white-space

white-space是CSS的属性,其作用是规定文本不进行换行. white-space有以下几个值: 1.normal:该值为默认值,段落前后的空白会被浏览器忽略.如下所示: <div style="width:200px;height:200px;white-space:normal;"> This is an Action! </div> 我们在This的前面加了许多空白,在Action的后面也加了许多空白.但是结果如下: 2.pre:段落前后的空白会被

html CSS 学习总结

HTML文件格式 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> 标签 <b></b>粗标签 <strong></strong>粗

学习css之文本属性

css3之文本属性: 1.缩进和水平对齐:text-indent, 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进6 em:p {text-indent:6em;} text-indent 属性可以继承. 2.水平对齐:text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式. 取值范围:{left:把文本排列到左边.默认值:由浏览器决定

css内容样式属性

使用 text-indent 属性,元素首行缩进.一般来说,适用于所有的块级元素,但无法适用于行内元素和类似于图片这样的元素.可以用%.固定值和负值.继承(使用此值,父元素最好要padding相应值). 使用text-align属性,会影响一个元素中的文本行互相之间的对齐方式.(块级和表元素居中要使用外边距实现).left.right .center和<center>(不仅影响文本,还会把整个元素居中).justify(使文本的两端都对齐,由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸

CSS语法与用法小字典

前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格式都稍差些.方便日后自己查阅,方便自己同时也方便他人,多好的一件事啊,呵呵! CSS目录 一.       CSS简介... 4 1.    CSS的分类... 4 1.1      内嵌样式... 4 1.2      内部样式表... 4 1.3      外部样式表... 4 2.    样式

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

一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; } 解读浮动闭合最佳方案:clearfix 二.使用斜杠/分割的关键字 1.font H2{ font:12px/100% sans-serif; } 分割的分别是 字体大小 与 行高 ,其他关键是用空白符分割. 2.background di

css基本知识

1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的一种样式设计语言.样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一. HTML 标签被设计为用于定义文档内容,也就是文档结构,为了增强代码的可读性,实现网页结构与表现相分离的原则,万维网联盟(W3C),肩负起了 HTML 标准化的使命,并在 HTML4 之外创造出