CSS3的文本特性

CSS3 文本
在Web页面或者Web应用程序中设置文本样式是CSS最基本的要求， 早期的CSS文本功能就是给Web页面设置文本的字体、字号、颜色、样式、粗细、间距等。 随着CSS3的出现，文本功能不仅仅局限于这些基本的运用，它给文本功能添加了一些高级的属性设置， 如文本阴影属性text-shadow、文本自动换行属性word- break、 长单词与URL地址自动换行属性word-wrap和文本溢出属性text-overflow等，在 CSS文本功能上主要分为三大类： 字体、 颜色和文本，text-shadow 属性一共包含4个属性参数， 每个属性参数都具有自己的作用。
-color：阴影颜色，定义绘制阴影时所使用的颜色，这个参数可以放在第一也可以放在最后，是一个可选参数，如果没有显式设置阴影颜色，会使用文本的颜色作为阴影颜色。 阴影颜色可以是颜色关键词、十六进制颜色、RGB颜色、RGBA透明色等。
-x-offset： X轴位移， 用来指定阴影水平位移量，其值可以是正负值，如果为正值，阴影在对象的右边，反之阴影在对象的左边。
-y-offset： Y轴位移， 用来指定阴影垂直方向偏移量，其值可以是正负值，如果为正值，阴影在对象的底部，反之阴影在对象的顶部。
-blur-radius： 阴影模糊半径，可选参数，用来设置阴影的模糊半径，代表阴影向外模糊的模糊范围。这个值越大，阴影向外模糊的范围越大，阴影的边缘就越 模糊。不过这个值只能是正值，其值为0时，表示阴影不具有模糊效果。
可以使用text-shadow属性来给文本指定多个阴影， 并且针对每个阴影使用不同颜色。 指定多个阴影时使用逗号将多个阴影进行分隔。 text- shadow 多阴影效果按照给定的顺序应用， 因此前面的阴影有可能会覆盖后面的， 但是它们永远会覆盖文本本身。

10年积累的网站设计、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有庄浪免费网站建设让你可以放心的选择与我们合作。

1. CSS3 溢出文本
   CSS3溢出文本属性平时在网页制作中一定碰到过内容溢出的问题， 如文章列表标题很长， 而其宽度又受到限制， 此时超出宽度的内容就会以省略 标记（…） 显示。 以前实现这样的效果都是由后台程序截取一定的字符数在前台输出，另外一种方法就是使用JavaScript截取一定的字符数实现。可是这两种方法都有其 不足之处，如中文和英文的计算字符宽度的问题，这个值不好计算，所以造成截取字符数不好控制，从而其通用性也差。 CSS3新增了text-overflow 属性， 使得 这个问题迎刃而解。
   text-overflow 属性参数比较简单， 只有两个属性值。
   -clip： 不显示省略标记（…）， 只是简单的裁切。
   -ellipsis： 文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
   强制文本在一行显示（ white- space: nowrap）和溢出内容隐藏（overflow: hidden），并且需要定义容器的宽度。
   text-overflow: ellipsis; overflow: hidden; 有省略号，需要这两个属性配合才有效，
   text-overflow: clip; overflow: hidden; 直接隐藏，需要这两个属性配合才有效，
2. CSS3 文本换行
   http:/ /www.iis7.com/b/wzjk/
   在CSS3中，使用word-wrap：break-word属性实现长单词与URL地址的自动换行。
   -break-all：可以强行截断英文单词， 达到词内换行效果。
   -keep-all：不允许字断开。如果是中文把前后标点符号内的一个汉字短语整个换行，英文单词整个换行；如果出现某个英文字符长度超过容器边界，后面的部分将撑破容器； 如果边框为固定属性， 则后面部分无法显示。
   white-space 属性主要用来声明建立布局过程中如何处理元素中的空白符。
   white-space 属性取值简单说明如下：
   -normal： 默认值。 空白处会被浏览器忽略。 可以通过这个值恢复到属性的默认值。
   -pre： 文本空白处会被浏览器扣留，其行为方式类似于HTML中的<pre>标签效果。
   -nowrap： 文本不会换行，文本会在同一行上，直到碰到换行标签<br/>为止。
   -pre- line： 合并空白符序列，但保留换行符，此属性不支持 IE 7. 0-、 Firefox 3. 0- 和 Opera 9. 2- 以下版本浏览器。
   -pre- wrap： 保留空白符序列， 但是正常进行换行， 此属性值不支持 IE 7. 0 和 Firefox 3. 0 以下 版本浏览器。
   -inherit： 继承父元素的white-space 属性值， 此属性值在所有的 IE浏览器都不支持。

名称栏目：CSS3的文本特性
URL分享：https://www.cdcxhl.com/article34/johose.html

成都网站建设公司_创新互联，为您提供营销型网站建设、响应式网站、虚拟主机、网站策划、全网营销推广、网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联