CSS 文本属性可定义文本的外观, 这是毫无疑问的, 其次 CSS 可以通过以下属性改变文字的排版, 比方说 letter-spacing 实现字符间距 text-indent: 2em; 完成首行缩进 2 字符 Word-spacing 改变了文字的间距, direction 改变文本从左至右的阅读顺序, white-space 处理字符间空白 text-transform 实现文字大小写 text-align 改变文字排版对齐, 至于我们常看到的产品介绍中的省略号 "..." 如何实现以及文字如何贴图对齐, 尽在下面代码详情中一一介绍.
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- CSS 常用样式对文本的处理演练
- </title>
- <style type="text/css">
- div#box{ letter-spacing: 2px;/* 字符间距 */ text-indent: 2em;/* 首行缩进 2 字符
- */ width: 300px;/* 容器宽度 */ height: 200px;/* 容器高度 */ color: #000;/* 文本颜色
- */ background-color:rgb(255,0,0);/* 容器背景色 */ } p{ Word-spacing: 5px;/*
- 文字间距 */ direction: rtl;/* 文本方向 *//* 默认文本方向从左至右 ltr,left to right*/ white-space:normal;/*
- 处理空白符 */ /* 通过使用该属性, 可以影响浏览器处理字之间和文本行之间的空白符的方式. 从某种程度上讲, 默认的 XHTML 处理已经完成了空白符处理:
- 21 它会把所有空白符合并为一个空格. 所以给定以下标记, 它在 web 浏览器中显示时, 各个字之间只会显示一个空格, 同时忽略元素中的换行:*/
- } /* 文本修饰 */ p.text{ text-decoration: underline; text-decoration: overline;
- text-decoration: none; text-transform: uppercase;/* 全部大写 */ text-transform:
- lowercase;/* 全部小写 */ text-transform: capitalize;/* 首字母大写 */ } /* 文本对齐方式
- */ div{ text-align: left; /* 文本居左 */ text-align: right; /* 文本居左 */ text-align:
- center; /* 文本居中 */ text-align: justify;/* 两端对齐 */ } /* 问题: 我们通常看到的类似这样的
- http://www.mi.com/seckill 商品介绍中的省略号... 如何实现? */ div#box{ width: 400px;
- height: 50px; white-space: nowrap;/* 文本不换行 */ overflow: hidden;/* 文本穿出隐藏
- */ text-overflow: ellipsis;/* 省略号 */ line-height: 50px;/* 文本垂直对齐 */ } /*
- 问题: 当插入图片, 如何让文本与图片顶对齐围绕 */ img{ width: 200px; float: left; vertical-align:
- bottom;/* 文本垂直 middle top bottom */ } div>p{ float: left;/* 文本贴图对齐 */ }
- </style>
- </head>
- <body>
- <div id="box">
- 撩人情话: 1. 我并非言辞夸张或虚情假意. 我觉得, 这个世界已经待我极好. 从前我也不曾这么认为. 直到, 我在芸芸众生之中遇见你. 遇见一道光,
- 让我此生再无遗憾, 再不畏惧. 2. 我是个固执的人, 从不愿挪动原则半分, 61 可你来了之后, 我的原则就成了你. 3. 喜欢一个人是藏不住的,
- 即使嘴巴不说, 也会从眼睛里跑出来. 我喜欢你, 认真且怂, 从一而终.
- </div>
- <p class="text">
- I'm a stubborn person. I never want to move half of the principles, but
- after you come, my principles become you.
- </p>
- <div class="pic">
- <img src="https://i-beta.cnblogs.com/assets/adminlogo.gif" alt="">
- 我是个固执的人, 从不愿挪动原则半分, 可你来了之后, 我的原则就成了你. 65
- </div>
- </body>
- </HTML>
- display:block; / 内联对象需加 /
- Word-break:keep-all; / 不换行 /
- white-space:nowrap; / 不换行 /
- overflow:hidden; / 内容超出宽度时隐藏超出部分的内容 /
- text-overflow:ellipsis; / 溢出时显示省略标记...; 需与 overflow:hidden; 一起使用 /
对于表格, 定义有点不一样:
- table{
- width:30em; table-layout:fixed; / 只有定义了表格的布局算法为 fixed, 下面 td 的定义才能起作用 /
- }
- td{
- width:100%; Word-break:keep-all; / 不换行 /
- }
- white-space:nowrap; / 不换行 / overflow:hidden; / 内容超出宽度时隐藏超出部分的内容 / text-overflow:ellipsis; / 溢出时显示省略标记...; 需与 overflow:hidden; 一起使用 /
来源: http://www.jianshu.com/p/4994c6ce0a5e