本文总结一下CSS中关于文字的相关属性,最后给出实例。

CSS基础文字属性

文字的基础属性主要包括:字体、颜色和文本。除去颜色color的属性外,字体和文本的相关属性可以权威参考:
CSS 文本属性(Text)
CSS 字体属性(Font)

CSS3新增属性

  • 文本阴影text-shadow
  • 文本溢出text-overflow
    这个属性一般需要配合overflow:hiddenwhite-spance:nowrap(强制文本容器不换行)使用。
  • 文本换行word-wrap word-break
    这里有两个设置有点类似,都是对长单词或网址、数字之类的字符串在到达右边界时进行断行。区别是:word-wrap:break-word会首先尝试将长字符串移入下一行,如果仍然显示不下,就切断分割;而word-break:break-all则会直接进行切割。
    代码示例
    默认默认word-wrapword-break
    另外,属性white-space也对文本换行有影响,当其为nowrap时会强制不换行。

实际应用

利用文本溢出的text-overflow属性,可以对列表的文本展示进行设置,
即充分利用空间又保证样式美观,详见代码示例

文本设置tips

  • 单元格td自动换行:
table {
    table-layout:fixed; //列宽由表格宽度和列宽度设定。
    width:**px;
}
table td{
    overflow:hidden;
    word-wrap:break-word;
}
  • 文本的垂直居中vertical-align:
    这个问题也许大家经常碰到,我就不详说具体解决方案了,可以参考这两篇文章我对CSS vertical-align的一些理解与认识未知高度多行文本垂直居中。只说一下要点,vertical-align设置时一定要有参照点,而且vertical-align只在inline-block的容器内有效,块级元素容器设置vertical-align是不起作用的。
posted @ 2015-07-12 19:16 meta-D 阅读(1078) 评论(0) 推荐(0)
摘要: 一、闭包印象----闭包是JavaScript里绕不开的话题,本文旨在让你理解闭包,阐述闭包的一些特性防止不知不觉掉坑,并在适当的条件下利用好这些特性。关于闭包的权威定义,犀牛书上说得很透彻了(其实我看得有些晕),阮一峰老师[学习Javascript闭包(Closure)][1]和耗子哥[理解Jav... 阅读全文
posted @ 2015-06-23 17:26 meta-D 阅读(813) 评论(2) 推荐(0)
摘要: 这段时间做了一个简单的页面,借机又重温了一下CSS的相关知识,现总结一下:工欲善其事必先利其器,让我们先做一点准备工作1.在页面添加: 指定IE利用标准模式渲染页面,而不是兼容模式 viewport的属性 width:控制 viewport 的大小,可以指定的一个值,如果 600,或者... 阅读全文
posted @ 2015-06-07 16:57 meta-D 阅读(534) 评论(3) 推荐(1)
摘要: 1.简介 @font-face用于自定义字体样式,从服务器端取得字体样式,使浏览器可以显示客户端并不存在的样式效果,给用户带来更好的展示体验。 @font-face并不是CSS3的新特性,早在98年就被写入CSS2的规范当中,目前在IE6都可支持。2.语法 @font-face { fo... 阅读全文
posted @ 2015-05-31 16:44 meta-D 阅读(4990) 评论(0) 推荐(0)
摘要: 继承在JavaScript中是一种“奇葩”的存在,因为其本身并没有类(class)的概念(ES5),所以只能用其他方式(原型链、构造函数、对象实例)来模拟继承的行为。既然是模拟,那就应该是想办法实现继承的行为特点,个人认为继承的核心就是:能复用就复用,不能复用的就复制。 写在前面: 方法是属... 阅读全文
posted @ 2015-05-24 22:55 meta-D 阅读(687) 评论(3) 推荐(0)
摘要: 原型(prototype)无疑是JavaScript中一个十分重要的概念,围绕着原型所涉及的原型链继承、内建对象扩展,JS表现出独特的面向对象特性。 1.什么是原型 每个JS的函数对象中都有一个默认的prototype属性,它指向的就是这个函数对象的原型对象,其初始值是一个没有自身属性“空对... 阅读全文
posted @ 2015-05-12 13:03 meta-D 阅读(296) 评论(0) 推荐(0)
点击右上角即可分享
微信分享提示