<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <p id="p1">text-align文本水平对齐方式</p>

     <p>This    is     a    test    sentence.   汉字    之间    无     空格     会     当作     一个     单词。    </p>

     <p id="p3">abcdqwert yuiopasdfg hjklzxcvbn mnqwertyuioqwe rtyuiasdf ghjzxcvb qwetyuasdfg hzxcv bnasdfgh qwerty uwertyusdfghxcvb qwertyusdfghxcvbnoqwertyuioasdfghjklzxcvbnm</p>

     <p id="p4">abcdqwert yuiopa sdfghjklzx cvbnmnqwe rtyuioqwerty uiasdfghjzxcvb qwetyuas dfghzxcvbnasdfg hqwertyuwe rtyusd fghxcvbqwertyusdfghxcvbnoqwerty uioasdfghjklzxcvbnm</p>

     <p id="p5">abcdqwert yuiopa sdfghjklzx cvbnmnqwe rtyuioqwerty uiasdfghjzxcvb qwetyuas dfghzxcvbnasdfg hqwertyuwe rtyusd fghxcvbqwertyusdfghxcvbnoqwerty uioasdfghjklzxcvbnm</p>

     <h1>h1标签内容</h1>

 </body>

 </body>

 </html>
 /*#p1{*/

     /*text-align: justify;*//*默认left，可设right、center、justify、start、end*/

     /*line-height: 3;*//*设置行高：normal、数字、百分比、px、em*/

     /*text-indent: 20px;*//*设置首行缩进：像素、百分比、em*/

     /*text-decoration:line-through overline underline;*//*默认值none在超链接去掉默认下划线时可用到，下划线underline，上划线overline，删除线line-through，闪烁文本blink*/

     /*letter-spacing: 2em;*//*设置字符间距，默认normal，可用像素、em，可设负值*/

     /*}*/

 p{

     /*word-spacing: 2em;*//*类似letter-spacing，可设负值*/

     /*text-transform: lowercase;*//*none默认；capitalize每个单词以大写字母开头，uppercase转换为大写字母，lowercase转换为小写字母*/

     /*text-shadow: 3px 3px 3px red, -6px -6px 3px green;*//*四个参数：横向偏移、纵向偏移、模糊度、颜色，可加多个阴影用逗号隔开*/

     /*white-space: pre;*//*设置元素中空白处理方式：默认normal；pre空白会保留，类似pre标签；nowrap文本不会换行，文本会在同一行上继续，直到遇到br标签为止；pre-wrap保留空白正常换行；pre-line合并空白正常换行*/

     /*direction: rtl;*//*默认ltr*/

     /*unicode-bidi: bidi-override;*//*从右向左读文字，一般配合direction使用，默认normal，可设embed*/

 }

 #p3{

     background: green;

     width: 200px;

     word-wrap: break-word;

 }

 #p4{

     background: blue;

     width: 200px;

     word-wrap: ;

 }

 #p5{

     background: red;

     width: 200px;

     word-break: break-all;/*比work-wrap的break-word拆的更彻底。keep-all只能在半角空格或连字符处换行*/

 }

 h1{

     -webkit-text-stroke:1px red;/*多数浏览器不支持此功能，所以要加浏览器私有前缀-webkit-*/

     -webkit-text-fill-color:blue;

 }

 /*text-overflow设置是否使用一个省略标记...标示对象内文本溢出：clip默认值，当对象内文本溢出时不显示省略标记，而是将溢出部分裁掉；ellipsis当对象内文本溢出时显示省略号。此属性要和over-flow：hidden属性，white-space:nowrap配合使用。*/

 /*

 text-outline规定文本的轮廓；

 text-justify规定当text-align设置为justify时所使用的对齐方式；

 text-align-last设置如何对齐最后一行或紧挨强制换行符之前的行；

 text-emphasis向元素的文本应用重点标记以及重点标记的前景色；

 hanging-punctuation规定标点字符是否位于线框之外；

 punctuation-trim规定是否对标点字符进行修剪；

 tab-size设定一个tab在页面中的显示长度；

 text-wrap规定文本的换行规则。

 */

【CSS3】文本属性的更多相关文章

  1. 4.css3文本属性

    1.css3文本属性: ①Color:颜色. ②Text-align:文本水平对齐方式. ⑴Left默认值,right,center,justify两端对齐: ⑵新增start相当于left,end相 ...

  2. CSS3文本属性

    text-shadow(文本阴影) <h1>我有文字阴影</h1> h1{ color:#ffff00; text-shadow:1px 2px 2px #000000; } ...

  3. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 ...

  4. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  5. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  6. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSS3 新增的文本属性

    一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  8. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  9. CSS3常用属性

    CSS是我们常用的控制网页样式和布局的一种标准. CSS3是最新的CSS标准. CSS3被拆分为"模块",旧的规范也已经拆分为小的块,同时还增加了新的属性. 一些比较重要的CSS3 ...

  10. CSS3文本温故

    1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...

随机推荐

  1. PHP设计模式之组合模式

    当我们的一个对象可能代表一个单一的实体,或者一个组合的实体,但是仍然需要通过同样的方式被使用时,这种情形则适合使用组合模式的设计. 组合模式是一种结构型模式. 当看了书上的解释之后,并不是很理解,遂去 ...

  2. Maven 整合 SSH 框架

    前面的一系列文章中,我们总结了三大框架:Struts2,Hibernate,Spring 的基本知识.本篇就姑且尝试着使用 Maven 这个项目构建工具来将这三个框架整合一起.说到这里,如果有对 Ma ...

  3. socket.io 入门篇（三）

    本文原文地址:https://www.limitcode.com/detail/5926e3a056fba70278bf2044.html 前言 上篇我们介绍了 socket.io 中room的概念和 ...

  4. TP 3.2.3 接入PHPMailer

    TP 3.2.3 接入PHPMailer 项目需要接入邮件发送,这里先记录. 首先在开发这个功能先,您需要先下载个phpmailer的类,这里github 一搜索就有. 如:https://githu ...

  5. （转载）java 枚举 循环遍历以及一些简单常见的使用

    本文转载自:http://blog.csdn.net/qq_27093465/article/details/51706076 作者:李学凯 什么时候想用枚举类型: 有时候,在设计一个java mod ...

  6. 自学python笔记（一）

    一   简介:Python是著名的"龟叔"Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言.其他的就不说了..... python是 ...

  7. virtualbox下centos实现主宿互访

    1.网络连接方式 NAT 桥接 Host-Only NAT: 网络地址转换,virtualbox默认采用这种连接方式,特点: 1.虚拟机配置稍作修改就能连上外网 2.虚拟机可以ping通主机,主机不能 ...

  8. js学习笔记（延时器）

    //setTimeout()   //功能:设置一个延时器   //语法:var timer = window.setTimeout(code,millisec);   //参数: code:是任何合 ...

  9. SSM Spring+SpringMVC+mybatis+maven+mysql环境搭建

    SSM Spring+SpringMVC+mybatis+maven环境搭建 1.首先右键点击项目区空白处,选择new->other..在弹出框中输入maven,选择Maven Project. ...

  10. 整合SSH时，遇到了org.springframework.beans.factory.BeanCreationException错误

    严重: StandardWrapper.Throwableorg.springframework.beans.factory.BeanCreationException: Error creating ...