文本溢出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

style="width: 100%; height: 600px;" src="https://demo.xiaohuochai.site/css/textoverflow/t1.html" frameborder="0" width="320" height="240">

【多行文本溢出】

  在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>    

style="width: 100%; height: 90px;" src="https://demo.xiaohuochai.site/css/textoverflow/t2.html" frameborder="0" width="320" height="240">

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

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

style="width: 100%; height: 100px;" src="https://demo.xiaohuochai.site/css/textoverflow/t3.html" frameborder="0" width="320" height="240">

 

文本阴影

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

定义

text-shadow

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

  初始值: none

  应用于: 所有元素

  继承性: 无

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

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

style="width: 100%; height: 320px;" src="https://demo.xiaohuochai.site/css/textoverflow/t4.html" frameborder="0" width="320" height="240">

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

style="width: 100%; height: 50px;" src="https://demo.xiaohuochai.site/css/textoverflow/t5.html" frameborder="0" width="320" height="240">

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

常见效果

style="width: 100%; height: 400px;" src="https://demo.xiaohuochai.site/css/textoverflow/t6.html" frameborder="0" width="320" height="240">

【文字阴影代码查看】

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python第十三天,函数的嵌套定义,global,nonlocal关键字的使用,闭包及闭包的运算场景,装饰器...

今日内容 1. 函数的嵌套定义 2.global&#xff0c;nonlocal关键字 3.闭包及闭包的运用场景 4.装饰器 函数的嵌套定义 1. 概念&#xff1a;在一个函数内部定义另一个函数 2 .为什么要有函数的嵌套定义&#xff1a; 1) 函数fn2想要直接使用fn1函数的局部变量&#xff0c;可以将fn…

glup打包代码不更新

一开始以为是缓存问题&#xff0c;清完缓存依旧不行。找到打包文件找到自己改的代码是否生效了。发现修改过的代码生效了&#xff0c;but 相同方法存在两个。方法一中是修改后的内容&#xff0c;方法二是未修改的内容。原因&#xff1a;在打包前将原文件复制了一个副本&#xf…

.net反射简介

目录 [隐藏] 1 概述 2 一些在反射中经常使用的类 3 其它 4 示例 .net反射简介-概述 反射就是动态发现类型信息的能力。它帮助程序设计人员在程序运行时利用一些信息去动态地使用类型&#xff0c;这些信息在设计时是未知的&#xff0c;这种能力类型于后期绑定。反射还支持的更高…

带有Angular JS的Java EE 7 –第1部分

今天的帖子将向您展示如何使用Java EE 7和Angular JS构建非常简单的应用程序。 在去那里之前&#xff0c;让我告诉您一个简短的故事&#xff1a; 我不得不承认&#xff0c;我从来都不是Java语言的忠实拥护者&#xff0c;但是我仍然记得我第一次使用它。 我不记得确切的年份&am…

深入理解CSS定位中的堆叠z-index

前面的话 对于所有定位&#xff0c;最后都不免遇到两个元素试图放在同一位置上的情况。显然&#xff0c;其中一个必须盖住另一个。但&#xff0c;如何控制哪个元素放在上层&#xff0c;这就引入了属性z-index 定义 利用z-index&#xff0c;可以改变元素相互覆盖的顺序。这个属性…

初识服务发现及Consul框架的简单使用

初识服务发现及Consul框架的简单使用 1.什么是服务发现&#xff1f; 服务发现组件记录了&#xff08;大规模&#xff09;分布式系统中所有服务的信息&#xff0c;人们或者其它服务可以据此找到这些服务。 DNS 就是一个简单的例子。 当然&#xff0c;复杂系统的服务发现组件要提…

进程间的通信方式

5&#xff0c;进程间通信方式____ &#xff0c;____ &#xff0c;____ &#xff0c;____ &#xff0c;____ &#xff0c;_____。 管道 消息队列 共享内存 信号 信号量 套接字 管道通信&#xff1a;实质是管道文件操作&#xff0c;分为有名管道和 无名管道两种。 无名管…

JavaFX技巧4:总结

在为JavaFX开发自定义控件时&#xff0c;我强烈建议您遵循JavaFX核心控件的脚步&#xff0c;并使控件的API尽可能最终化&#xff0c;并在所有方法声明的前面放置“ final”关键字。 例 在FlexGanttFX中&#xff0c;我有很多看起来像这样的代码&#xff1a; public final Acti…

CSS光标cursor

前面的话 在浏览器中&#xff0c;光标对于提供交互反馈很有用。通过在不同的场景中改变光标&#xff0c;就能赋予其不同的含义 定义 cursor光标 值: [<uri>,]*[auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize …

jquery获取value值时将数字型字符串前面的0自动截取处理方法

<li class"cwhite" value"02" id"02" οnclick"getQuestionList(02,this);">数学</li> var subjectCode $(obj).find(".bd.subject li[classcwhite active]").val(); 这种方法会把02前面的0自动截取 var subje…

《Effective C#》Item 21:用委托实现回调

委托属于C#中的新名词&#xff0c;它的应用也非常广泛&#xff0c;例如事件就是委托最简单而又直接的例子。 那么首先说说什么是委托&#xff0c;其实委托在用过C或者C的人看来就是函数指针&#xff0c;不过使用C#的大多数人都没有用过这两门语言&#xff0c;因此对委托的理解不…

人生建议

1、不要在最幸福的时候许诺。 2、不要在暴怒的时候回信息。 3、不要在悲伤的时候做决定。 4、不要在迷茫的时候选择轻松的道路。 5、不要在自己做决定后怪别人。 6、不要把现在的幸福当作理所当然。 转载于:https://www.cnblogs.com/tarenacode/p/11460619.html

Spring MVC中的验证组

可以通过groups属性将Bean验证中的验证约束添加到一个或多个组。 这使您可以限制在验证期间应用的约束集。 在某些小组应先于其他小组进行验证&#xff08;例如在向导中&#xff09;的情况下&#xff0c;这可能很方便。 从Spring MVC 3.1开始&#xff0c;可以通过org.springfra…

表单美化

前面的话 由于一些系统原生的表单控件在各个浏览器中显示效果不一致&#xff0c;且无法设置某些关键CSS样式&#xff0c;为了保证表单在各浏览器中的兼容性&#xff0c;表单美化就是不得不做的一件事了 单选按钮 【实现效果】 style"width: 100%; height: 120px;" s…

【Python3.6】python打包成exe

D:\python_test>pip3 install pyinstaller…………D:\python_test>pyinstaller -F -w ui.py 84 INFO: PyInstaller: 3.3.1 85 INFO: Python: 3.6.4 88 INFO: Platform: Windows-10-10.0.15063-SP0 93 INFO: wrote D:\python_test\ui.spec 94 INFO: UPX is not available.…

算法题解:连续子数组的最大和及其下标

题目 输入一个整型数组&#xff0c;数组里有正数也有负数。数组中一个或连续的多个整数组成一个子数组。求所有子数组的和的最大值。要求时间复杂度为O(n)。 举例 输入&#xff1a;2, -3, 4, 5, -9 输出&#xff1a;9 和最大的连续子数组是 {4, 5}&#xff0c;结果就是9。 思路…

简而言之,JUnit:Hello World

对于Java世界中的开发人员而言&#xff0c; JUnit似乎是最受欢迎的测试工具 。 因此&#xff0c;难怪就此主题已经写了一些好书 。 但是&#xff0c;通过以顾问为生&#xff0c;我仍然经常遇到程序员&#xff0c;他们至多对工具及其正确用法都不了解。 因此&#xff0c;我想到…

jQuery获取所有父级元素及同级元素及子元素的方法

jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id").closest() 获取其最近的祖先元素&#xff0c;依次上溯 2.获取同级元素 $("#…

考取RHCE认证的历程,总结的经验

昨天去考试的&#xff0c;今天下午结果出来了&#xff0c;达到了我的预期。成功的获取了RHCE认证&#xff0c;以后我也是有证的人咯~&#xff0c;开个玩笑。 其实去年的时候我就曾经想要去考取的&#xff0c;我原来一直以为考取RHCE认证时考题都是英文的呢&#xff1f;因为我英…

Python萌新笔记

Mychael上了大学&#xff0c;对Python产生了浓厚的兴趣&#xff0c;便开始了Python的学习 学习的时候&#xff0c;感觉Python确实比以往学的C表达简洁很多&#xff0c;而又不失强大 以后的学习笔记就记在这啦 变量 Python中的变量无需声明&#xff0c;其类别也只有具体赋值的时…