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. pytest进阶之配置文件

    前言 pytest配置文件能够改变pytest框架代码的运行规则.比如修改pytest收集用例的规则,添加命令行参数等等!下面我们来一一讲解常用的一些配置项 Help 通过命令pytest --hel ...

  2. c# 事件的订阅发布Demo

    delegate void del(); class MyClass1 { public event del eventcount;//创建事件并发布 public void Count() { ; ...

  3. Python猜数小游戏

    使用random变量随机生成一个1到100之间的数 采集用户所输入的数字,如果输入的不符合要求会让用户重新输入. 输入符合要求,游戏开始.如果数字大于随机数,输出数字太大:如果小于随机数,输出数字太小 ...

  4. 正则表达式在Java中的使用

    目录 介绍 从简单例子认识正则表达式匹配 Java中对正则表达式的支持(各种语言有相应的实现) 初步认识 . + * ? 范围 认识\s \w \d - 下面介绍数字和字母的正则表达, 这是编程中使用 ...

  5. vue项目中vux的使用

    vux VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求. 在vue-cli中使用步骤如下: 1.安装: npm i vux -S ...

  6. 《ASP.NET MVC 5 高级编程》学习笔记

    前言: 记得当初培训的时候,学习的还是ASP.NET,现在回想一下,图片水印.统计人数.过滤器....HttpHandler是多么的经典! 不过后来接触到了MVC,便立马爱上了它.Model-View ...

  7. Nginx 一个高性能的HTTP和反向代理服务器

    本文只针对Nginx在不加载第三方模块的情况能处理哪些事情,由于第三方模块太多所以也介绍不完,当然本文本身也可能介绍的不完整,毕竟只是我个人使用过和了解过,欢迎留言交流. Nginx能做什么 ——反向 ...

  8. 【English EMail】2019 Q2 Public Holiday Announcement

    Hi all, According to 2019 public holiday announcement released by Chinese government, this is to ann ...

  9. Linux如何管理文档多租户

    例题 同一群组microsoft下的两个账号justmine001和justmine002需要共同拥有目录/microsoft/eshop的开发权,以便进行协同工作,但是其他人不允许进入和查阅该目录. ...

  10. Project file is incomplete. Expected imports are missing 错误解决方案

    当你打开一个.net core的项目,Visual Studio 可能无法打开,提示如下错误: D:\workshop\Github\Ocelot\src\Ocelot\Ocelot.csproj : ...