CSS文本属性可定义文本的外观，这是毫无疑问的，其次css可以通过以下属性改变文字的排版，比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-spacing改变了文字的间距，direction改变文本从左至右的阅读顺序，white-space处理字符间空白text-transform实现文字大小写text-align改变文字排版对齐，至于我们常看到的产品介绍中的省略号“...”如何实现以及文字如何贴图对齐，尽在下面代码详情中一一介绍。

 <!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 处理已经完成了空白符处理：

         它会把所有空白符合并为一个空格。所以给定以下标记，它在 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.我是个固执的人，从不愿挪动原则半分，

     可你来了之后，我的原则就成了你。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="">我是个固执的人，从不愿挪动原则半分，可你来了之后，我的原则就成了你。

     </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;一起使用*/

css常用样式对文本的处理演练的更多相关文章

  1. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  2. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

  3. CSS常用样式（四）之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  4. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...

  5. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  6. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  7. CSS常用样式整理

    元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: p ...

  8. CSS常用样式--font

    CSS font 属性 参考:W3school- CSS font 所有浏览器都支持 font 属性,可在一个声明中设置所有字体属性,各属性需按顺序,语法如下: selector{ font:styl ...

  9. CSS常用样式（二）

    一.边框样式 1.border:复合属性.设置对象边框的特性. 取值: border-width: 设置或检索对象边框宽度. border-style: 设置或检索对象边框样式. border-col ...

随机推荐

  1. 客户端TNSPING通 连接出现ORA-12514错误

    ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务,这是一个经常遇到的问题,可以按照以下步骤一步步解决 1.使用tnsping检测 tnsping可判断出以下两点(1)判断网络 ...

  2. 【java面试】java和C/C++的区别

    1.内存分配 java中对内存的分配是动态的,JVM自动对内存进行扫描,对长期不用的空间作为"垃圾"进行收集,使得系统资源得到更充分地利用.按照这种机制,程序员不必关注内存管理问题 ...

  3. set(待整理)

    set集合容器:实现了红黑树的平衡二叉检索树的数据结构,插入元素时,它会自动调整二叉树的排列,把元素放到适当的位置,以保证每个子树根节点键值大于左子树所有节点的键值,小于右子树所有节点的键值:另外,还 ...

  4. Ubuntu 获取 root 用户权限并以 root权限登录

    操作步骤: 1.打开终端,使用 sudo passwd root 命令进行 Ubuntu 中密码的重置        2.切换到 /usr/share/lightdm/lightdm.conf.d 目 ...

  5. CTF--HTTP服务--SSI注入

    开门见山 1. 扫描靶场ip,发现VM 192.168.31.160 2. 扫描主机服务信息和服务版本 3. 快速扫描靶场全部信息 4. 探测开放的http的敏感信息 5. 再用dirb扫描敏感页面 ...

  6. Linux防火墙之iptables基本匹配条件和隐式扩展匹配条件

    一.iptables的基本匹配条件 上一篇博文我们说到了iptables的基本工作原理.数据报文在内核的走向和管理链.管理规则.以及查看规则.导入和导出规则:回顾请参考https://www.cnbl ...

  7. Django自动化测试平台项目案例

    引言 在项目组待了近半年时间,根据自己的感受和体验,做了一个辅助测试的工具(数据预报平台),主要目的是针对目前项目接口文档缺失,自动化预报脚本无法可视化,资源循环利用,统一管理化. 业务背景 我们项目 ...

  8. FD_WRITE是如何触发的？

    The FD_WRITE network event is handled slightly differently. An FD_WRITE network event is recorded wh ...

  9. VS2013下OpenCV2.48配置

    VS2013+OpenCV2.48配置 一.下载OpenCV OpenCV下载地址http://opencv.org/ SDK下载链接在页面右侧 根据平台选择相应的SDK下载.在Windows开发下开 ...

  10. FFMPEG学习----使用SDL播放YUV数据

    命令行下配置: G:\Coding\Video\SDL\proj>tree /F 文件夹 PATH 列表 卷序列号为 0FD5-0CC8 G:. │ sdl.cpp │ SDL2.dll │ S ...