快捷搜索:  as  lzyq858.com  test  lzyq858.com`  MTU2MjQxMjI2MA`

CSS3新特性(05):文本格式

CSS3新特点中关于文本方面的内容不少,会有两节内容:翰墨衬着和文本款式。本日来谈谈最繁杂的部分——文本款式。本日谈的属性大年夜多会在你制作文章页面时用上哟!好好听。

01.处置惩罚换行、空格和Tab:white-space

众所周知,浏览器对HTML中的换行符是采取轻忽政策的,是以一样平常保举应用

来换行。但对付多个空格(space)以及Tab只会认作一个空格(space)来处置惩罚,是以当必要用到多个空格时,就必要使用空格的实体字符 来强制显示空格。实际上,以上这各种麻烦,CSS都能随意马虎降服:white-space。

(1)语法

white-space:nomal|nowrap|pre|pre-wrap|pre-line;

换行符

空格和 Tab

文本越过容器宽度

nomal

轻忽

折叠

换行

nowrap

轻忽

折叠

不换行

pre

换行

维持原样

不换行

pre-wrap

换行

维持原样

换行

pre-line

换行

折叠

换行

(2)语法解析

下面根据上面这表格来先容一下white-space各值的含义:

当white-space为normal(浏览器默认值),即换行符无效(collapse)、多个空格及Tab被折叠(collapse)成一个空格来处置惩罚、文本内容会自动换行。

当white-space为nowrap时,文本内容不自动换行(至于是强行冲破容器照样截断显示则要视乎另一个CSS——overflow,下文胪陈),其它体现与normal同等。

当white-space为pre时,换行符有效、多个空格及Tab不会被折叠,文本不会自动换行。事实上,

的浏览器默认样式中就有white-space: pre;。

当white-space为pre-wrap时,换行符有效、多个空格及Tab不会被折叠,文本会自动换行,此属性多用来展示法度榜样代码段,可以保留此中的换行及缩进。

当white-space为pre-line时,换行符有效,多个空格及Tab会被合并成一个空格,文本越过会自动换行。

这个属性对照让人不爽的是只看其值并不能轻松的知道其详细的设置。假如将其拆分成三个属性:

new-line :值为 preserve 或 collapse

space-and-tab: 值为 preserve 或 collapse

text-wrapping: 值为 wrap 或 nowrap

然后 white-space 为以上属性的一个简写

white-space: [new-line] [space-and-tab] [text-wrapping];

(3)兼容性主流浏览器,以致包括 IE6 都支持 white-space 的所有值。

02.一个长单词越过容器宽度时是否换行:word-wrap

必须留意到,这是一个长单词越过容器宽度的环境,而且只需斟酌英文,中文没有此特点。

(1)语法

word-wrap: normal|break-word;

normal,长单词不换行

break-word,长单词自动换行

03.抉择文本的换行点:word-break

当一行的末端已不能完备放下某个单词A,那么就必要抉择用哪种策略来放置这单词A(肯定是英文了,中文没这问题)了:

(1)语法

word-break: normal|break-all|keep-all;

(2)语法解析

normal:应用浏览器默认的换行规则。

break-all:挤挤更康健,硬是让单词A挤上去,放不下的部分就换行到下一行继承显示。这实际上是没有把这个单词看做是一个整体,而因此字母作为最小可换行的单位:

keep-all,不挤不挤我就不挤,哪怕实际上这个单词独有一行也无法完备显示,也要另起一行来显示:

word-wrap 和 word-break这两项CSS属性异常类似,一是都管换行的,二是都针对英文。在我看来,word-break比word-wrap更彻底,由于只要设置word-break: break-all;,那么就从根本上否定了“拆分单词”这一事实,而是转变为“若何放置一串字母”,那么换行便是天经地义的了。而word-wrap: break-word;实际上照样把单词当做是“单词”来看待的,只是为了显示效果委屈求全了。

04.规定若何处置惩罚内容溢出容器:overflow

属性感化于block型元素上。它规定了当内容元素溢出元素框时发生的事:裁剪内容,应用滚动条来显示 或 直接显示越过部分 。

默认值。内容不会被修剪,会出现在元素框之外:overflow: visible;

范例如上文的:

/* 内容会被修剪,并且另外内容弗成见 */overflow: hidden;

硬是截掉落越过容器部分的内容:

/* 内容会被修剪,浏览器会显示滚动条以便查看另外内容 */overflow: scroll;

无论有无内容溢出容器,都显示滚动条;如有内容溢出,经由过程滚动条可以查看溢出内容:

/* 由浏览器决议确定,假如内容被修剪,就会显示滚动条 */overflow: auto;

若有内容溢出容器,才显示滚动条:

/* 规定从父元素承袭overflow属性的值 */overflow: inherit;

05.添加省略号:text-overflow

text-overflow是建立在overflow: hidden;等根基上的,假如overflow为其它值(inherit的话就要父级环境)则无效。text-overflow有很多可取的值,但实际上今朝浏览器兼容性较好的只有clip | ellipsis

clip:浏览器默认值便是clip,便是什么都不加

ellipsis:给被截掉落的文本内容末端添上个…

text-overflow仅支持水平偏向的溢出,换句话说,只支持单一行文本内容的溢出(上图那环境虽然是多行,但这种环境不会呈现在中文,由于中文都是自动换行的),若想支持多行,则必要应用插件,保举 dotdotdot。

参考文章

《谈谈若何用CSS处置惩罚文本款式》

《不简单的 white-space 属性》

Web前端

© 著作权归作者所有

举报文章

荷小音

简书基础不再更新,但照样会继承写作,放在官网,www.heeerin.com,可以在那里找到我。

也可以在微信"民众,"号找我,"民众,"号:heeerin,今朝"民众,"号已经与官网绑定,可回覆关键词,实时查看官网的文章。

下载app生生长微博图片

分享到QQ空间

分享到Twitter

分享到Facebook

分享到Google+

分享到豆瓣

'>更多分享

广告

-->

本文由永乐国际【官网】❽-首页原创或转载,如果侵犯了你的权益,请联系我们删除。

您可能还会对下面的文章感兴趣: