CSS3文本

1、text-overflow

  1. clip: 隐藏超出文本
  2. ellipsis: 超出部分使用省略号

文字超出部分裁剪掉:

overflow:hidden;
text-overflow:clip;

文字超出部分用省略号代替:

overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap; // 强制不换行

2、文本换行

word-wrap

word-wrap 属性允许长单词或 URL 地址换行到下一行

  1. normal: 只在允许的断字点换行
  2. break-word: 在长单词或 URL 地址内部进行换行

word-break

word-break 属性规定自动换行的处理方法

  1. normal 使用浏览器默认的换行规则。
  2. break-all 允许在单词内换行。
  3. keep-all 只能在半角空格或连字符处换行。

white-space

white-space 属性设置如何处理元素内的空白

  1. normal 默认。连续空白会被浏览器忽略。
  2. pre 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。
  3. nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。
  4. pre-wrap 保留空白符序列,但是正常地进行换行。
  5. pre-line 合并空白符序列,但是保留换行符。
  6. inherit 规定应该从父元素继承 white-space 属性的值。

3、text-shadow

text-shadow 属性向文本添加一个或多个阴影。

text-shadow: 颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)
text-shadow: x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)

和box-shdow很像,可以设置偏移、颜色、阴影大小

text-shdow: 2px 2px 3px #333;

可以写多个,,隔开

 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;

结合背景颜色,通过偏移距离负数或者颜色,可以做出各种效果

text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;

color: #fff; text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

自定义控件详解(七):drawText()

1813
来自专栏进击的君君的前端之路

CSS理解之margin

1202
来自专栏吾爱乐享

php学习之html属性-表格(六)

2452
来自专栏Android小菜鸡

HTML JS DOM

  当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。

1302
来自专栏菜鸟计划

CSS基础语法(二) CSS的9种选择器

样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性  .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元...

3453
来自专栏Java后端技术

CSS语法小记

    1.选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,例如h1,img;也可以是定义了特定的id或者class的标签,如...

651
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 vertical-align 篇

元素vertical-align垂直对齐的位置与前后元素都没有关系 元素vertical-align垂直对齐的位置与行高line-height没有关系。 ver...

2212
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(二)获取和操作元素的属性

DOM中有很多方式获取元素,比如通过id,通过标签名,通过类名,通过name的值,通过选择器等方式。

1264
来自专栏Java帮帮-微信公众号-技术文章全总结

与Ajax同样重要的jQuery(1)

jQuery框架 jQuery 1.4 是企业主流版本,从jQuery1.6 开始引入大量新特性。最新版本 2.1.1,这里讲解以1.8.3为主(新版本主要是浏...

3086
来自专栏河湾欢儿的专栏

定位

定位元素位置控制 top/right/bottom/left 定位元素偏移量。

1111

扫码关注云+社区