前面的话

  CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别。因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性。本文将详细介绍这两个作用在文本上的溢出和阴影属性

文本溢出

  一般地,人们一提到文本溢出,想到的就是文本溢出的经典代码

  1. white-space: nowrap;
  2. overflow: hidden;
  3. text-overflow: ellipsis;

  但实际上,文本换行不一定非要使用white-space;overflow属性值也不一定非要使用hidden

定义

text-overflow

  值: clip | ellipsis

  初始值: clip

  应用于: 块级元素、替换元素、表单元格

  继承性: 无

  1. clip: 不显示省略标记(...),只是简单的裁切,相当于无效果
  2. ellipsis: 文本溢出时显示省略标记(...),省略标记插入的位置是最后一个字符

  [注意]当文本溢出属性应用于表单元格时,需要设置table-layout:fixed

  [注意]该属性兼容性很好,兼容IE6+的主流浏览器及移动端iso和android

实现

【1】当存在长英文文本时,text-overflow属性起作用的前提是

  1. overflow(或overflow-yoverflow-x):hidden | auto | scroll

【2】当文本为汉字时,text-overflow属性起作用的前提是

  1. 实现汉字不自动换行可使用word-break: keep-all; white-space: nowrap;
  2. overflow(或overflow-yoverflow-x):hidden | auto | scroll

【多行文本溢出】

  在webkit浏览器中,有一个不规范的属性-webkit-line-clamp,它可以实现多行文本溢出。它的值是一个<number>,设置为几,便可以设置相应数字的文本溢出

  设置多行文本溢出,还需要配合其他样式,样式如下

  1. /*溢出隐藏*/
  2. overflow:hidden;
  3. /*旧版本flex*/
  4. display:-webkit-box;
  5. /*旧版伸缩流方向为垂直方向*/
  6. -webkit-box-orient:vertical;
  7. /*溢出隐藏3行*/
  8. -webkit-line-clamp: 3;

  实例如下

  1. <div style="width:300px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;">
  2. 我是测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
  3. </div>

  [注意]不要显式地设置高度,而应该让其自适应高度,否则会造成如下效果

  1. <div style="width:300px;height: 75px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;">
  2. 我是测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
  3. </div>

文本阴影

  类似于盒子阴影,文本阴影也有x轴偏移、y轴偏移、模糊半径和阴影颜色这四个值,但是并没有阴影尺寸和内部阴影这两个值

定义

text-shadow

  值: none | (h-shadow v-shadow blur color)+

  初始值: none

  应用于: 所有元素

  继承性: 无

  1. h-shadow: 水平阴影位置(必须)
  2. v-shadow: 垂直阴影位置(必须)
  3. blur: 模糊距离(该值不能为负值,可选)
  4. color: 阴影颜色,默认和文本颜色一致(可选)

  [注意]该属性IE9-浏览器不支持

  1. //多层阴影
  2. text-shadow: 1px 1px blue,5px 5px 5px red;

  [注意]不要加太多层阴影,会有性能问题

常见效果

【文字阴影代码查看】

文本溢出text-overflow和文本阴影text-shadow的更多相关文章

  1. css文本溢出隐藏显示省略号(单行+多行)

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  2. 每日技术总结:setInterval,setTimeout,文本溢出,小程序,wepy

    前言: 项目背景:vue,电商,商品详情页 1.倒计时,倒计到0秒时停止 data () { return { n: 10 } }, created () { let int = setInterva ...

  3. pyqt text browser 设置文本

    pyqt text browser 设置文本 setHtml(u"Html") setPlainText(u"纯文本") setText(u"文本\n ...

  4. 破损的键盘(悲剧文本)(Broken Keyboard(a.k.a. Beiju Text),Uva 11988)

    破损的键盘(悲剧文本)(Broken Keyboard(a.k.a. Beiju Text),Uva 11988) 题意描述 你在输入文章的时候,键盘上的Home键和End键出了问题,会不定时的按下. ...

  5. CNN tensorflow text classification CNN文本分类的例子

    from:http://deeplearning.lipingyang.org/tensorflow-examples-text/ TensorFlow examples (text-based) T ...

  6. CSS3文本溢出显示省略号

    CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...

  7. 文本溢出text-overflow

    文本溢出text-overflow 问题:有一个新闻标题,标题宽度为200px,文字为宋体,加粗,文字大小为16px,颜色为黑色,行高为25px,要求单行显示,并且超出时显示“…”,请按要求完成效果. ...

  8. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  9. ZH奶酪:HTML元素文本溢出显示省略号(...)

    一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...

随机推荐

  1. Bootstrap 栅格系统

    1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的m ...

  2. 从网络上下载文件到sd卡上

    String SDPATH = Environment.getExternalStorageDirectory() + "/"; String path = SDPATH + &q ...

  3. java的值传递和引用传递

    昨天博主在对于值传递和引用传递这里栽了一个大坑啊,导致一下午时间都浪费在这里,我们先说下值传递和引用传递java官方解释: 值传递:(形式参数类型是基本数据类型):方法调用时,实际参数把它的值传递给对 ...

  4. 【整理】--【GPIO】OK6410

    S3C6410的GPIO引脚相对来说比较多,而且大部分引脚都具有多重复用功能,如何在linux上用最简单的方式来控制GPIO这需要我们好好研究一下底层的代码了,其实方法有很多种,鉴于在操作系统端控制G ...

  5. HDU1575Tr A(矩阵相乘与快速幂)

    Tr A hdu1575 就是一个快速幂的应用: 只要知道怎么求矩阵相乘!!(比赛就知道会超时,就是没想到快速幂!!!) #include<iostream> #include<st ...

  6. 【转】各种语言中的urlencode方法

    URLENCODE和URLDECODE是比较常用的URL参数转换方法,为以后使用方便,自己归类一下.   原文地址:http://blog.sina.com.cn/s/blog_3f195d25010 ...

  7. HTTP03--DNS知识

    一.域名解析过程 1. 浏览器检查自身缓存,缓存时间为几分钟到小时不等,通过设置TTL属性确定. 2. 若1未找到,则查OS缓存,如windows下的host文件,linux的/etc/hosts文件 ...

  8. .Net Core下如何管理配置文件

    一.前言 根据该issues来看,System.Configuration在.net core中已经不存在了,那么取而代之的是由Microsoft.Extensions.Cnfiguration.XX ...

  9. centos7 memcached+memagent 集群

    1. 安装libevent wget https://github.com/libevent/libevent/releases/download/release-2.0.22-stable/libe ...

  10. Java多线程系列--“JUC锁”05之 非公平锁

    概要 前面两章分析了"公平锁的获取和释放机制",这一章开始对“非公平锁”的获取锁/释放锁的过程进行分析.内容包括:参考代码获取非公平锁(基于JDK1.7.0_40)释放非公平锁(基 ...