0

0

CSS基础知识之文本属性二三事_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:04:17

|

1367人浏览过

|

来源于php中文网

原创

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。

 

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;}

这里 span 的下划线覆盖了 p 的下划线.

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

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

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

 

text-indent

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

p {  text-indent: 2em;}

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

text-indent: -3em;

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

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

text-indent: -9999px;

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

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

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

 

text-overflow

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

奇布塔
奇布塔

基于AI生成技术的一站式有声绘本创作平台

下载

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;

 

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;

 

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;}

 

word-break

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

word-break: break-all;

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

 

word-wrap

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

word-wrap: break-word;

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

overflow: hidden;

 

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

css

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

0

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

html编辑相关教程合集
html编辑相关教程合集

本专题整合了html编辑相关教程合集,阅读专题下面的文章了解更多详细内容。

56

2026.01.21

三角洲入口地址合集
三角洲入口地址合集

本专题整合了三角洲入口地址合集,阅读专题下面的文章了解更多详细内容。

51

2026.01.21

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

397

2026.01.21

妖精漫画入口地址合集
妖精漫画入口地址合集

本专题整合了妖精漫画入口地址合集,阅读专题下面的文章了解更多详细内容。

118

2026.01.21

java版本选择建议
java版本选择建议

本专题整合了java版本相关合集,阅读专题下面的文章了解更多详细内容。

3

2026.01.21

Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

11

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Rust 教程
Rust 教程

共28课时 | 4.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.4万人学习

JavaScript
JavaScript

共185课时 | 19.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号