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 条评论
登录 后参与评论

相关文章

来自专栏专注 Java 基础分享

struts2标签库----数据标签详解

     上篇文章我们介绍struts2标签库中的控制标签的基本使用和部分原理,本篇文章接着了解下标签库中有关数据标签的使用和原理。主要涉及以下数据标签: ac...

22710
来自专栏Jerry的SAP技术分享

单步调试理解webpack里通过require加载nodejs原生模块实现原理

在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块。

1012
来自专栏数据小魔方

动态图表7|组合框(index函数)

今天跟大家分享动态图表7——组合框(index函数)! 组合框制作图表,其步骤与列表框相同,唯一的不同点在于,组合框控件,提供用于选择的下拉菜单,在未选择的情况...

3034
来自专栏达摩兵的技术空间

h5标签入门

731
来自专栏Google Dart

AngularDart Material Design 自动输入建议 顶

material-auto-suggest-input是一个输入字段,在用户输入时提供自动完成输入的建议。

724
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.3 文档对象模型DOM及表单

文档对象模型DOM用途是什么?先从一棵树说起。下面是一棵树,由,根部、枝干、叶构成,通过根部可以访问到任何一个叶节点。

542
来自专栏章鱼的慢慢技术路

用Python中的tkinter模块作图

1795
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.3 文档对象模型DOM及表单

文档对象模型DOM用途是什么?先从一棵树说起。下面是一棵树,由,根部、枝干、叶构成,通过根部可以访问到任何一个叶节点。

900
来自专栏lhyt前端之路

浏览器原理0. 前言1. 解析过程2. 渲染树2.1 CSS样式计算2.2 构建渲染树3. 布局(重要)4. 重绘与重排(重要)5. paint(绘制)6. composite(重要)7. 浏览器加载

身为前端,打交道最多的就是浏览器和node了,也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程,......,我们直接来到收到...

702
来自专栏Django中文社区

基于类的通用视图:ListView 和 DetailView

在开发网站的过程中,有一些视图函数虽然处理的对象不同,但是其大致的代码逻辑是一样的。比如一个博客和一个论坛,通常其首页都是展示一系列的文章列表或者帖子列表。对处...

2767

扫码关注云+社区