div{
             font-size: 20px;
             text-shadow: 5px 5px 5px #333;

   text-shadow: 10px 10px 4px rgba(255, 0, 0, .5);  /*可以使用rgba设置透明效果*/
         }

h-shadow:第一个属性值,表示水平阴影的位置,可以是负值

v-shadow:第二个属性值,表示垂直阴影的位置,可以是负值

blur:第三个属性值,表示模糊的距离,设置为负值时,没有模糊的效果

color:第四个属性值,表示阴影的颜色,也可以用rgba设置为透明颜色

===============================================================

该属性暂不支持,任何浏览器。

---------------------

word-break 有三个属性,针对整段文字而言:

normal 和 keep-all 效果差不多(换行的规则是有空格,且一行末尾放不下,换行):

1,顶格,最后一个单词(包括连字符)放不下就换行。

2,最后一个单词加一个标点符号,放不下也换行。

3,值为:keep-all,如果内容是中文,中文之间没空格,一句看成一个单词。行末放不下一整句才换行。

break-all:

1,顶格,最后一个单词放不下就拆开单词换行,不利阅读。

换行规则:只有空格才换行。中文之间是没空格的,所以把一句看成一个单词,如果值是keep-all,那么最后放不下一整句才换行。

在中文中 normal 和 break-all效果差不多,

======================================

word-wrap  只针对很长的拉丁文。对于方块文字无效,如:中文,日文,韩文等等。值:

1,normal  不换行,长单词容易溢出父元素。

2,break-word    长单词到一行结尾会自动换行。

--------------------------------------------------------

在IE和火狐浏览器中 一定要加上:text-align:justify。然后再设置text-algin-last。

text-align-last 对文本最后一行进行设置:

auto/initial:  默认左对齐

left:    强制左对齐

right:  强制右对齐

center:  居中对齐

start:  前面文本左对齐,最后一行也左对齐

end:  前面文本左对齐,最后一行就右对齐,反之左对齐。

inherit:  继承父元素的对齐方式

=================================

使用text-overflow属性前,必须先设定overflow:hidden; 溢出部分隐藏,否则text-overflow属性值无效。

clip  切掉

ellipsis   溢出部分使用三个点的省略号。

string   自定义符号,如:“>>”  该值只有火狐浏览器支持。

.one{overflow: hidden;  text-overflow: clip;}
         .two{overflow: hidden;  text-overflow: ellipsis;}
         .three{overflow: hidden;  text-overflow: ">>"}

===============

CSS文本属性 文本阴影text-shadow 换行 text-overflow的更多相关文章

  1. CSS 常用属性之 阴影

    text-shadow 是一个给文字添加阴影的属性 text-shadow: X偏移量,Y偏移量,模糊值,颜色  可以同时设置多个文本阴影,需要用逗号隔开 如果是需要兼容低版本的浏览器 -webkit ...

  2. CSS(二)属性--文本设置

    HTML代码一 <body> <div>这是一个很黑很黑的夜晚,黑云密布,没有任何光亮透过.卖火柴的小姑娘.......</div> </body> C ...

  3. Web前端新人笔记之文本属性

    前一段时间因工作时间减缓了更新笔记的时间.我也不知道有没有会观看并且能不能帮到一些初学者,这只是我的一些小随笔而已.当然我也希望的的每一篇随笔都可以帮到更多的想要学习前端开发的初学者们,更希望你们也可 ...

  4. web前端学习笔记:文本属性

    今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常 ...

  5. CSS边框属性

    边框 圆角 border-radius border-top-left-radius border-top-right-radius border-bottom-left-radlius border ...

  6. CSS常用属性-xy

    一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

  7. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  8. 1+x证书学习日志——css常用属性

     ## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

  9. [CSS]文本属性(Text)

      CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...

随机推荐

  1. 同源策略 & 高效调试CORS实现

    # 目录 为什么有同源策略? 需要解决的问题 CORS跨域请求方案 preflight withCredentials 附:高效.优雅地调试CORS实现 ----------------------- ...

  2. Python-爬取校花网视频(单线程和多线程版本)

    一.参考文章 python爬虫爬取校花网视频,单线程爬取 爬虫----爬取校花网视频,包含多线程版本 上述两篇文章都是对校花网视频的爬取,由于时间相隔很久了,校花网上的一些视频已经不存在了,因此上述文 ...

  3. ES 集群上,业务单点如何优化升级?

    摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! ES 基础 ES 集群 ES 集群上业务优化 一.ES 基础 ...

  4. My97DatePicker日期控件,开始时间不能大于结束时间,结束时间不能小于开始时间

    在只做项目的时候,需要用到一个日期控件,之前用到过my97,感觉挺好的,兼容性很强,配置也比较容易 当开始时间不能大于结束时间和结束时间不能小于开始时间,这个需要一个判定的,要不然不就乱套了 在my9 ...

  5. ajax调用WebAPI添加数据

    //获取账号名 var Name = document.getElementById("Text1").value;//获取密码 var Pass = document.getEl ...

  6. eureka服务搭建

    Server端 引入eureka server的maven依赖 引入依赖时无需给定eureka的版本号,maven会根据当前使用的SpringCloud版本来判断应该引入哪个版本的euraka ser ...

  7. Process 'command 'D:\jdk8\jdk\bin\java.exe'' finished with non-zero exit value 2

    转载请标明出处,维权必究:https://www.cnblogs.com/tangZH/p/10539006.html 捣鼓了好久,现在已经不想说话,为何会出现这个问题,Process 'comman ...

  8. Git:九、删除项目

    1.删除远程仓库 1)打开有绿色客隆按钮的仓库代码页面,选择Settings 2)把页面拉到最下边 2.删除本地仓库 1)先删.git隐藏文件 2)强行删除仓库文件夹 显示所有文件,包括隐藏的:ls ...

  9. pytest之收集用例规则与运行指定用例

    前言 上篇文章相信大家已经了解了pytest在cmd下结合各种命令行参数如何运行测试用例,并输出我们想要看到的信息.那么今天会讲解一下pytest是如何收集我们写好的用例?我们又有哪些方式来运行单个用 ...

  10. hexo 报错 Cannot read property 'replace' of null

    详细错误信息: FATAL Cannot read property 'replace' of null TypeError: Cannot read property 'replace' of nu ...