当前位置:  编程技术>WEB前端

从零学CSS系列之文本属性

    来源: 互联网  发布时间:2014-10-07

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

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)。

就算使用 em,百分比等相对单位,后代元素继承的仍然是计算后的行高(line-height)值,比如把上面的 body 行高改成 1.5em,那么 h1 的行高就会继承这个值 18px。

2.text-decoration

文本修饰是非继承类属性,给 body 元素设置为 none,并不会影响到后代中默认有文本修饰的元素,例如超链接,所以如果要去掉超链接的默认下划线还是需要单独进行设置,

代码如下:

a {
  text-decoration: none;
}

虽然该属性默认不继承,但是祖先元素上设置的修饰会“延伸”到后代元素中,

代码如下:

我有下划线 我咋会有下划线呢?


代码如下:

p {
  color: red;
  text-decoration: underline;
}

p span {
  color: green;
  text-decoration: none;
}

这里的下划线是 p 元素的。

代码如下:

p {
  color: red;
  text-decoration: underline;
}

p span {
  color: green;
  text-decoration: underline;
}

由于文本修饰属性的延伸会造成一些兼容性的问题,所以

最好的做法就是给需要修饰的文本单独设置 text-decoration 属性。

3.text-indent

可以使用该属性给每个段落首行缩进2个字符,而不是使用空格,

代码如下:

p {
  text-indent: 2em;
}

也可以指定一个负数的值,产生首行悬挂的效果,

让引号悬挂也是一种常用做法,

让文本缩进到一个足够远的地方,可以让文字消失,

代码如下:

text-indent: -9999px;

 因此,通常的图像替换文字常用方法,

代码如下:

.logo {
  background: url(/tech-webtech/logo.png) no-repeat;
  display: inline-block;
  height: 36px;
  text-indent: -9999px;
  width: 72px;
}

IE6/7 并不真正支持 inline-block,某些情况下可能会导致 .logo 消失不见,可以使用浮动或者 block 替代 inline-block,不过两者都会改变布局方式,也可以使用其它方法。

4.text-overflow

通常情况下,长串的URL地址,在超出容器时会溢出,我们可以设定当文本溢出包含容器时显示省略符号,

代码如下:

li {
  overflow: hidden;
  text-overflow: ellipsis;
}


必须配合 overflow: hidden; 一起使用;有时候可能还得加上一个宽度,比如IE 6,

对于那些默认情况下并不会溢出的文本,需要强制其在一行内显示,这样才能产生效果,

代码如下:

li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; /* for IE 6 */
}

使用 white-space: pre; 或者 word-break: keep-all; 也能强制文本在一行显示,不过各有各的问题。

在 IE 8/9 中,有时候会发现没有效果,那有可能是祖先元素中某个元素设置了word-wrap: break-word; 而该属性会表现得比 white-space: nowrap; 更强势,所以,有时候还得加上下面代码,

代码如下:

word-wrap: normal;

5.text-shadow

在非白色背景的深色文字上,可以实现漂亮的内嵌效果,

代码如下:

text-shadow: 0 1px 0 rgba(255,255,255,.75);

可以给文本添加多个阴影,用逗号分隔,

代码如下:

text-shadow: 0 1px 0 #fff, 0 2px 0 #ddd, 0 3px 0 #ddd, 0 4px 0 #ddd;

6.white-space

white-space 属性设置如何处理元素内的空白。

设置值为 nowrap 让文本可以在同一行上继续,遇到边界也不会换行,直到遇到
标签,

代码如下:

white-space: nowrap;

有时我们希望保留文本中的空格和换行符之类的,比如展示计算机的源代码的时候,就会用到

,而 
 的 white-space 属性的值就是 pre,

代码如下:

pre {
  white-space: pre;
}

pre 也不那么尽如人意,遇到边界的时候不会自动换行,所以 CSS 2.1 新增了 pre-wrap,

代码如下:

pre {
  white-space: pre;
  white-space: pre-wrap;
}

这样 pre 元素里的内容既能保持原有的格式,又能在内容超出边界的时候自动换行。

由于不是所有浏览器都支持 pre-wrap,所以还需要让那些不支持浏览器强制换行,

代码如下:

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

当然,也许你并不希望换行,也不介意水平滚动条,那可以用水平滚动条来代替换行,

代码如下:

pre {
  overflow: auto;
}

7.word-break

目前 webkit 大家族(包括 Google Chrome,Safari,Android Browser 等等)均不支持 keep-all 值,所以能用的也就 break-all 了,

代码如下:

word-break: break-all;

不过会造成英文文本阅读障碍,应该慎用,

8.word-wrap

这是比 word-break 更好的实现文本换行的方式,

代码如下:

word-wrap: break-word;

再添加一个溢出隐藏,避免一些恶意的连续字符,

代码如下:

overflow: hidden;

    
 
 

您可能感兴趣的文章:

  • CSS3 box-flex-group 属性
  • CSS属性 - white-space 空白属性使用说明
  • CSS3 rotation 属性
  • CSS教程之css选择器 、属性、值
  • CSS empty-cells 属性
  • jQuery设置CSS属性(示例)
  • CSS table-layout 属性
  • jQuery 设置 CSS 属性示例介绍
  • CSS3 grid-rows 属性
  • CSS属性搜索 Browser Support
  • CSS border-spacing 属性
  • jquery控制css的display属性(显示与隐藏)
  • CSS caption-side 属性
  • CSS 关于网页图片的属性
  • CSS3 target-new 属性
  • jquery控制css display属性(控制元素显示与隐藏)
  • CSS3 box-lines 属性
  • jQuery修改CSS伪元素属性的方法
  • CSS3 grid-columns 属性
  • jquery控制css元素的display(显示与隐藏)属性
  • CSS3 text-outline 属性
  • css white-space:nowrap属性用法(可以强制文字不换行输出)
  • html5/css3文本阴影(text-shadow)详解及示例
  • 用css实现隐藏文本框
  • CSS控制长文本内容显示(截取的地方用省略号代替)
  • 文本框css关闭输入法
  • CSS控制文本自动换行的问题
  • 用css截取字符的几种方法详解(css排版隐藏溢出文本)
  • CSS渐变文本效果的两种方法比较
  • CSS小例子(只显示下划线的文本框,像文字一样的按钮)
  • css文本框与按钮美化效果代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • CSS代码检查工具 CSS Lint


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3