文本溢出text-overflow和文本阴影text-shadow
前面的话
CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别。因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性。本文将详细介绍这两个作用在文本上的溢出和阴影属性
文本溢出
一般地,人们一提到文本溢出,想到的就是文本溢出的经典代码
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
但实际上,文本换行不一定非要使用white-space;overflow属性值也不一定非要使用hidden
定义
text-overflow
值: clip | ellipsis
初始值: clip
应用于: 块级元素、替换元素、表单元格
继承性: 无
clip: 不显示省略标记(...),只是简单的裁切,相当于无效果
ellipsis: 文本溢出时显示省略标记(...),省略标记插入的位置是最后一个字符
[注意]当文本溢出属性应用于表单元格时,需要设置table-layout:fixed
[注意]该属性兼容性很好,兼容IE6+的主流浏览器及移动端iso和android
实现
【1】当存在长英文文本时,text-overflow属性起作用的前提是
overflow(或overflow-y或overflow-x):hidden | auto | scroll
【2】当文本为汉字时,text-overflow属性起作用的前提是
实现汉字不自动换行可使用word-break: keep-all; 或 white-space: nowrap;
overflow(或overflow-y或overflow-x):hidden | auto | scroll
【多行文本溢出】
在webkit浏览器中,有一个不规范的属性-webkit-line-clamp,它可以实现多行文本溢出。它的值是一个<number>,设置为几,便可以设置相应数字的文本溢出
设置多行文本溢出,还需要配合其他样式,样式如下
/*溢出隐藏*/
overflow:hidden;
/*旧版本flex*/
display:-webkit-box;
/*旧版伸缩流方向为垂直方向*/
-webkit-box-orient:vertical;
/*溢出隐藏3行*/
-webkit-line-clamp: 3;
实例如下
<div style="width:300px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;">
我是测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
[注意]不要显式地设置高度,而应该让其自适应高度,否则会造成如下效果
<div style="width:300px;height: 75px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;">
我是测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
文本阴影
类似于盒子阴影,文本阴影也有x轴偏移、y轴偏移、模糊半径和阴影颜色这四个值,但是并没有阴影尺寸和内部阴影这两个值
定义
text-shadow
值: none | (h-shadow v-shadow blur color)+
初始值: none
应用于: 所有元素
继承性: 无
h-shadow: 水平阴影位置(必须)
v-shadow: 垂直阴影位置(必须)
blur: 模糊距离(该值不能为负值,可选)
color: 阴影颜色,默认和文本颜色一致(可选)
[注意]该属性IE9-浏览器不支持
//多层阴影
text-shadow: 1px 1px blue,5px 5px 5px red;
[注意]不要加太多层阴影,会有性能问题
常见效果
文本溢出text-overflow和文本阴影text-shadow的更多相关文章
- css文本溢出隐藏显示省略号(单行+多行)
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
- 每日技术总结:setInterval,setTimeout,文本溢出,小程序,wepy
前言: 项目背景:vue,电商,商品详情页 1.倒计时,倒计到0秒时停止 data () { return { n: 10 } }, created () { let int = setInterva ...
- pyqt text browser 设置文本
pyqt text browser 设置文本 setHtml(u"Html") setPlainText(u"纯文本") setText(u"文本\n ...
- 破损的键盘(悲剧文本)(Broken Keyboard(a.k.a. Beiju Text),Uva 11988)
破损的键盘(悲剧文本)(Broken Keyboard(a.k.a. Beiju Text),Uva 11988) 题意描述 你在输入文章的时候,键盘上的Home键和End键出了问题,会不定时的按下. ...
- CNN tensorflow text classification CNN文本分类的例子
from:http://deeplearning.lipingyang.org/tensorflow-examples-text/ TensorFlow examples (text-based) T ...
- CSS3文本溢出显示省略号
CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...
- 文本溢出text-overflow
文本溢出text-overflow 问题:有一个新闻标题,标题宽度为200px,文字为宋体,加粗,文字大小为16px,颜色为黑色,行高为25px,要求单行显示,并且超出时显示“…”,请按要求完成效果. ...
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- ZH奶酪:HTML元素文本溢出显示省略号(...)
一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...
随机推荐
- 【13_263】Ugly Number
简单题 Ugly Number My Submissions Question Total Accepted: 32635 Total Submissions: 94009 Difficulty: E ...
- 深度解析Java8 – AbstractQueuedSynchronizer的实现分析(上)
本文首发在infoQ :www.infoq.com/cn/articles/jdk1.8-abstractqueuedsynchronizer 前言: Java中的FutureTask作为可异步执行任 ...
- 博客迁移至CSDN
本人的技术博客已经迁移至CSDN,地址为http://blog.csdn.net/starrow,现为Lotus Domino开发领域最活跃丰富的博客,内容包括Lotus Domino, JavaSc ...
- thinkphp学习笔记(一)
一.入门与安装 1.进入C:\Windows\System32\drivers\etc的hosts文件中增加127.0.0.1 www.tp5.com 即访问这个域名就相当于访问127.0.0.1 2 ...
- html5 localStorage实现表单本地存储
随笔开头,我不得不吐槽,为什么我的随笔每次发布之后,都会在分分钟之内移出首页.好气啊!! 进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新 ...
- poj 1286&&poj2409 Polya计数 颜色匹配
#include <iostream> #include <math.h> using namespace std; #define LL long long LL gcd(L ...
- PHPBB公布新的维护版本
9月28日,PHPBB官方网站公布了新PHPBB的最新消息.这个版本命名为:"Richard 'D¡cky' Foote",版本号为3.0.12.据官方的说明,“这个版本是一个维护 ...
- ASP.NET 5 入门 (3) – Logging
ASP.NET 5 理解和入门 建立和开发ASP.NET 5 项目 使用自定义配置文件 ASP.NET 5 入门 (3) – Logging 前几天就关注到汤姆大叔的相关文档: 解读ASP.NET 5 ...
- 做NavMesh相关工作时收集的一些文章
三角形拾取 http://www.blackpawn.com/texts/pointinpoly/default.htmlCS NavMesh使用手册https://developer.valveso ...
- 了解了这些才能开始发挥jQuery的威力
由于当前jQuery如此的如雷贯耳,相信不用介绍什么是jQuery了,公司代码中广泛应用了jQuery,但我在看一些小朋友的代码时发现一个问题,小朋友们使用的仅仅是jQuery的皮毛,只是使用id选择 ...