前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS3文本

CSS3文本

作者头像
小胖
发布2018-06-27 17:53:01
3900
发布2018-06-27 17:53:01
举报
1、text-overflow
  1. clip: 隐藏超出文本
  2. ellipsis: 超出部分使用省略号

文字超出部分裁剪掉:

代码语言:javascript
复制
overflow:hidden;
text-overflow:clip;

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

代码语言:javascript
复制
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 属性向文本添加一个或多个阴影。

代码语言:javascript
复制
text-shadow: 颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)
text-shadow: x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)

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

代码语言:javascript
复制
text-shdow: 2px 2px 3px #333;

可以写多个,,隔开

代码语言:javascript
复制
 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;

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

代码语言:javascript
复制
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);
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.12.22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、text-overflow
  • 2、文本换行
  • 3、text-shadow
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档