css3 关于文字,字体属性(转载)
1.text-overflow属性(实现省略号效果)
text-overflow用来设置是否使用一个省略标记(…)标示对象内文本的溢出。
【语法】
❤text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),代码如下:
text-overflow:ellipsis;
overflow:hidden; /*溢出内容为隐藏*/
white-space:nowrap; /*强制文本在一行内显示,直到遇到 <br> 标签为止。*/
【例题】
【网易2016内推笔试题】
<p>这是一段长度超过P元素的文字</p>
p{width:100px; white-space:nowrap;}
问:添加哪个会使得超出的部分变成省略号“…”? BD
A.white-space:normal
B.overflow:hidden
C.overflow:auto
D.text-overflow:ellipsis
2.word-wrap属性
word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。
单词太长的话就超出某个区域,在CSS3中,实现文本强制文本进行换行的属性是word-wrap属性,当它的值等于break-word的时候,就可以实现文本强制换行,可以对单个单词进行拆分。
【语法】
- normal为浏览器默认值;
- break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。
3.嵌入字体@font-face
@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。
【语法】
@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}
- 这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。
【例如】
html:
<div class="demo">IMOOC</div>
css:
@font-face{
font-family: "MOOC Font";
src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
.demo {
width: 340px;
font-size:58px;
font-family: "MOOC Font";
}
4.文本阴影text-shadow
text-shadow可以用来设置文本的阴影效果。
【语法】
text-shadow: X-Offset Y-Offset blur color;
- X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;
- Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;
- Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;
- Color:是指阴影的颜色,其可以使用rgba色。
【例如】
text-shadow: 0 1px 1px #fff;
css3 关于文字,字体属性(转载)的更多相关文章
- CSS3:不可思议的border属性&Web字体图标Font Awesome
CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...
- day67-CSS字体属性、文字属性、背景属性、css盒子模型
1. 字体属性 1.1 文字字体:font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. * {font-fa ...
- 伪元素选择器,选择器优先级,CSS修改文字属性,CSS修改字体属性,CSS修改其他属性
伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- CSS3 新增的文本属性
一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...
- CSS3的自定义字体@font-face:将图片ICON转为字体
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, ...
- CSS3实现文字描边的2种方法
问题 最近遇到一个需求,需要实现文字的描边效果,如下图 解决方法一 首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke 该属性是一个复 ...
- python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
随机推荐
- 调试日志——基于stm32的智能声光报警器(一)
今天新画的PCB板子到了,到了手中焊好电源部分测试,没有问题. 测试了下载程序,没有问题.时钟电路供电电路正常. 但是在程序运行的时候发现了问题,程序下载进去了却不运行. 这时候就要从原理图来找问题了 ...
- 跟着马哥学python-day02
1. 运算符 计算机可以进行的运算有很多种,可不只加减乘除这么简单,运算按种类可分为算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算. 1.1 算数运算 以下假设变量:a=10,b= ...
- 关于makefile中自动产生依赖的理解
本博文是在学习了<GNU Make中文手册>后记录下来的自己的关于自动产生makefile依赖的语句的理解,向大家分享. <GNU make中文手册>中的相关章节见一下链接: ...
- HDFS(0.20.2)运营中急救方案
这段时间折腾的都是hadoop和lucene,总结了hadoop在运营过程中出现问题时的解决方案,请大家指教! HDFS(0.20.2)运营中急救方案 1 Namenode 挂掉( ...
- 《Java 程序设计》课堂实践一
由于我的IDEA在课堂上临时崩坏导致当时无法编程,修了很长一段时间解决了诸多问题才修好 现将三个题目解答如下 一.MySort 模拟实现Linux下Sort -t : -k 2的功能.参考 Sort的 ...
- 20145207 java第二周学习总结
教材学习内容总结 这部分可能要扒一些课本而上的东西了.在第三章中,知道了Java可区分为基本类型和类类型两大类型系统,其中类类型也称为参考类型.在这一周主要学习了类类型. 对象(Object):存在的 ...
- 【转载】GC基本算法及C++GC机制
原文: GC基本算法及C++GC机制 阅读目录 前言 基本概念 有向可达图与根集 三种基本的垃圾收集算法及其改进算法 1.引用计数算法 2. Mark & Sweep 算法 3. 节点复制算法 ...
- macOS中启动Tomcat提示Cannot find ./catalina.sh
首先查看Tomcat目录下是否存在catalina.sh,如果文件不存在,文件丢失,最好的方式是重装Tomcat Tomcat官网:http://tomcat.apache.org/ 如果文件存在,那 ...
- Power Designer逆向工程导入Oracle表,转为模型加注释
1.打开PowerDesigner ——文件——Reverse Engineer——DataBase 2.选择所要连接数据库版本,此处使用的是oracle version 11g. 3.点击红色区域, ...
- JUC——JUC开发简介(一)
前言 JUC是Java5.0开始提供的一组专门实现多线程并发处理的开发框架,利用JUC开发架构可以有效的解决实际线程项目开发之中出现的死锁.阻塞.资源访问与公平机制. 此笔记主要记录java.util ...