web前台入门到实战：css常用样式对文本的解决演练
CSS文本属性可定义文本的外观，这是毫无疑问的，其次css可以通过以下属性改变文字的排版，比如说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-spacing改变了文字的间距，direction改变文本从左至右的阅读顺序，white-space解决字符间空白text-transform实现文字大小写text-align改变文字排版对齐，至于我们常看到的产品详情中的省略号“…”如何实现以及文字如何贴图对齐，尽在下面代码介绍中逐个详情。
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划）1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>css常用样式对文本的解决演练</title> 7 <style type="text/css"> 8 div#box{ 9 letter-spacing: 2px;/*字符间距*/10 text-indent: 2em;/*首行缩进2字符*/11 width: 300px;/*容器宽度*/12 height: 200px;/*容器高度*/13 color: #000;/*文本颜色*/14 background-color:rgb(255,0,0);/*容器背景色*/15 }16 p{17 word-spacing: 5px;/*文字间距*/18 direction: rtl;/*文本方向*//*默认文本方向从左至右ltr，left to right*/19 white-space:normal;/*解决空白符*/20 /*通过使用该属性，可以影响浏览器解决字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 解决已经完成了空白符解决： 21 它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：*/22 }23 /*文本修饰*/24 p.text{25 text-decoration: underline;26 text-decoration: overline;27 text-decoration: none;28 text-transform: uppercase;/*一律大写*/29 text-transform: lowercase;/*一律小写*/30 text-transform: capitalize;/*首字母大写*/31 }32 /*文本对齐方式*/33 div{34 text-align: left; /*文本居左*/35 text-align: right; /*文本居左*/36 text-align: center; /*文本居中*/37 text-align: justify;/*两端对齐*/38 }39 /* 问题：我们通常看到的相似这样的http://www.mi.com/seckill 商品详情中的省略号...如何实现？ */40 div#box{41 width: 400px;42 height: 50px;43 white-space: nowrap;/*文本不换行*/44 overflow: hidden;/*文本穿出隐藏*/45 text-overflow: ellipsis;/*省略号*/46 line-height: 50px;/*文本垂直对齐*/47 }48 /* 问题：当插入图片，如何让文本与图片顶对齐围绕 */49 img{50 width: 200px;51 float: left;52 vertical-align: bottom;/*文本垂直 middle top bottom */53 }54 div>p{55 float: left;/*文本贴图对齐*/56 }57 </style>58 </head>59 <body>60 <div id="box">撩人情话：1.我并非言辞夸张或者虚情假意。我觉得，这个世界已经待我极好。从前我也不曾这么认为。直到，我在芸芸众生之中遇见你。遇见一道光，让我此生再无遗憾，再不畏惧。2.我是个固执的人，从不愿挪动准则半分， 61 可你来了之后，我的准则就成了你。3.喜欢一个人是藏不住的，即便嘴巴不说，也会从眼睛里跑出来。我喜欢你，认真且怂，从一而终。</div>62 <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>63 <div class="pic">64 <img src="https://alpic.fanquanwang.com/kx3x/uppic/ysf0mtbgeyi39448544.gif" alt="">我是个固执的人，从不愿挪动准则半分，可你来了之后，我的准则就成了你。 65 </div>66 </body>67 </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;一起使用/
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web前台入门到实战：css常用样式对文本的解决演练
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web前台入门到实战：css常用样式对文本的解决演练
