CSS中的文本属性

本文总结一下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则会直接进行切割。
    代码示例

    另外,属性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是不起作用的。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索字体
, css
, 容器
, 属性
, 文本
, 文本属性
, word-wrap
, 长代码无法换行
td内容不换行
css文本属性、css文本属性有哪些、css的文本属性、css文本框属性、css中文本垂直居中,以便于您获取更多的相关知识。

时间: 2024-11-03 08:42:45

CSS中的文本属性的相关文章

CSS中display:inline-block属性妙用

  CSS中display:inline-block属性用法 在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,无论是初接触Web标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊. display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 但对于这个属性不是所有浏览器都识别. 支持的浏览器有:Opera.Safari 但很遗憾,最流行的IE和Firefox却不支持

通过设置CSS中的position属性来固定层的位置_javascript技巧

定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 默认值: static 继承性: no 版本: CSS2 JavaScript 语法: object.style.position="absolute" 实例 定位 h2 元素: h2 { position:absolute; left:100px; t

CSS中的font-size属性使用教程

  基本语法结构: Font-size+字体大小数值+单位 单词:font-size 语法:font-size : absolute-size | relative-size | length 取值:xx-small | x-small | small | medium | large | x-large | xx-large xx-small:最小 x-small:较小 small:小 medium:正常(默认值),根据字体进行调整 large:大 x-large:较大 xx-large:最大

从零学CSS系列之文本属性_基础教程

1.line-height 可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值, 复制代码 代码如下: body {  font-size: 12px;  line-height: 1.5;} h1 {  font-size: 36px;} 这里,body 的 line-height 是 18px(12 * 1.5),而 h1 的 line-height 则是 54px(36 * 1.5). 就算使用

CSS中的zoom属性和scale属性的用法及区别

  zoom 属性 语法: zoom:normal | | 默认值:normal 适用于:所有元素 继承性:有 取值: normal: 使用对象的实际尺寸. : 用浮点数来定义缩放比例.不允许负值 : 用百分比来定义缩放比例.不允许负值 说明: 设置或检索对象的缩放比例. 对应的脚本特性为zoom. Scale属性 scale属性的取值为2个,它本身其实相当于一个函数,因为它的写法就和函数一样: scale(); scale(x); scale(x,y); 1.scale(x,y) 对元素进行缩

CSS学习教程:认识会用CSS样式表的文本属性

css|教程|样式表 文本(text):css控制的文本属性主要包括以下四个: text-indent, text-align, text-decoration, text-transform; 1. text-align:属性text-align指文本的对齐方式,其有向左,向右,居中对齐以及自动适应四种对齐方式: text-align: left;text-align: right;text-align: center;text-align: justify; 例:css代码: body {f

CSS属性(文本属性)

css 3.文本属性 ※定义间距 前面说了如何用CSS定义字体.颜色和背景属性,那么定义好的文本我们怎么对它进行排版呢? 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 我们可以从表中看到在这里可以定义文本的文字间距.字母间距.装饰.对齐方式.缩进方式和行高等属性. 举个例子来看看吧.比如下面这段文字(如左下图): 我们对这段文字加上文本属性重新排版,排版后的效果如右上图所示. 我们看到经过文本属性处理的文本字与字之间多了间距,行与行之间多了行高,对齐方式变成了两端对齐,并

CSS中行高line-height属性的一些使用技巧

  先来回顾一下line-height的基础知识: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit 说明: 设置元素中行的高度. 值: normal:默认行高,一般为1到1.2; 实数:实数值,缩放因子; 长度:合法的长度值,可为负数; 百分比:百分比取值基于元素的字体尺寸. 初始值: normal 继承性: 继承 适用于: 所有元素 媒体: 视觉 计算值: 长度和百分比值为绝对值;其他同指定值. CSS

在CSS中插入javascript

css|javascript|插入 quirksmode站点的制作者发现了一个有趣的技巧.CSS中的background-image属性可以插入Javascript.遗憾的是目前只有IE5/6支持.(IE7我没有条件测试) 运行代码框 <style type="text/css">#test { border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("看到