1.text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。

  

2.但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。同时,word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。

normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。

3.@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。

@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}
p {
font-size :12px;
font-family : "My Font";
/*必须项,设置@font-face中font-family同样的值*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style type="text/css">
@font-face {
font-family: myfont;
src:local("Arialaaa"),/*如果本地客户端没有对应的字体,则会引用下面服务器的字体*/
url("TACOSRG_.ttf");
}
div{
font-family: myfont;
}
</style>
</head>
<body>
<div> this is myfont</div>
</body>
</html>

执行结果:

由于字体不同,即使设置相同的px大小,但是显示出来的字体还是不一样大。需要用font-size-adjust:来调整计算公式:x-height:58  font-size:100px aspect:0.58

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style type="text/css">
@font-face {
font-family: myfont;
src:local("Arial11"),
url("TACOSRG_.ttf");
}
#div1{
font-family: myfont;
font-size: 16px;
font-size-adjust: 0.57;
}
#div2{
font-family:Arial;
font-size: 16px;
font-size-adjust: 0.60;
}
#div3{
font-family: cursive;
font-size: 16px;
font-size-adjust: 0.57;
}
</style>
</head>
<body>
<div id="div1"> this is myfont</div>
<div id="div2"> this is myfont</div>
<div id="div3"> this is myfont</div>
</body>
</html>

4.text-shadow可以用来设置文本的阴影效果

    text-shadow: X-Offset Y-Offset blur color;

  X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;

  Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;

  Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;

  Color:是指阴影的颜色,其可以使用rgba色。

    可以设置多个阴影,用逗号隔开。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style type="text/css">
h2{
width: 200px;
height: 200px;
text-shadow: 5px 5px 4px blue,
10px 10px 3px #5cff69,
15px 15px 2px red;
}
</style>
</head>
<body>
<h2>你好!中国!</h2>
</body>
</html>

5、font:font-style|font-weight|font-size|line-height|font-family   //写的顺序不能变

  

CSS3---关于文本的更多相关文章

  1. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 使用CSS3改变文本选中的默认颜色——张鑫旭

    关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3. ...

  3. CSS3让文本自动换行——word-break属性

    1.依靠浏览器让文本自动换行 浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法 在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-b ...

  4. CSS3 新增文本样式

    CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现. 一.定义文本阴影 可以给文字添加阴影效果了 Shadow 影子 语法: text-sha ...

  5. css3之文本text-overflow 与 word-wrap, word-break

    CSS3 Text Overflow属性 CSS3文本溢出属性指定应向用户如何显示溢出内容 语法: text-overflow:clip | ellipsis 但是text-overflow只是用来说 ...

  6. css3基础-文本与字体+转换+过渡+动画+案例

    Css3文本与字体   文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行: h1:nth-child(1) { word-break: no ...

  7. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  8. CSS3单行文本两端对齐

    CSS3实现单行文本两端对齐 p { height: 24px; text-align: justify; text-last-align: justify; } p::after { display ...

  9. CSS3 justify 文本两端对齐

    浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...

  10. 【CSS3】---文本阴影text-shadow

    text-shadow可以用来设置文本的阴影效果. 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时 ...

随机推荐

  1. IDEA设置取消自动显示参数提示

    IDEA设置取消自动显示参数提示 最近在使用IDEA的过程中,发现方法中一直显示形参名的提示,无法选中,也无法删除,基于不同人的使用习惯不同,有的人不喜欢这种提示,我也在网上寻找各种解决方案,由于搜索 ...

  2. JSR 303 - Bean Validation 模型验证

    类是转载的,不知道转的哪里的. 此类依赖 JSR 303 – Bean Validation, Hibernate Validator. 代码不能直接运行.意会一下.自己改改. import com. ...

  3. selenium中Xpath和CSS Selector的使用方法

    一.selenium中Xpath的使用方法 1. 什么是xpath? Xpath是XML的路径语言,通俗一点讲就是通过元素的路径来查找这个标签元素 2. 练习Xpath的工具 火狐浏览器,下载插件Fi ...

  4. 【loj6034】「雅礼集训 2017 Day2」线段游戏

    #6034. 「雅礼集训 2017 Day2」线段游戏 内存限制:256 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:Special Judge 上传者: 匿名 题目描述 ...

  5. bzoj1024 [SCOI2009]生日快乐【dfs】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1024 普通的深搜. #include <cstdio> #include < ...

  6. PHP获取今天开始和结束的时间戳、每周开始结束的时间戳、每月开始结束的时间戳

    PHP获取今天内的时间 今天开始和结束的时间戳 $t = time(); $start = mktime(0,0,0,date("m",$t),date("d" ...

  7. 题解报告:poj 2631 Roads in the North(最长链)

    Description Building and maintaining roads among communities in the far North is an expensive busine ...

  8. v-bind和v-on

    v-bind指令用于设置HTML属性:v-bind:href  缩写为 :href <a :href="{{url}}">aa</a> v-on 指令用于绑 ...

  9. ubuntu用户自定义的命令alias永久生效

    cd ~ vi .bash_profile alias ll='ls -ltr' . .bash_profile ps:写在.bashrc终端断开就没了

  10. Elasticsearch (1) - 索引库 文档 分词

    创建索引库 ES的索引库是一个逻辑概念,它包括了分词列表及文档列表,同一个索引库中存储了相同类型的文档.它就相当于MySQL中的表,或相当于Mongodb中的集合. 关于索引这个语: 索引(名词):E ...