css3新增的文本高级样式-文本阴影和文本溢出
2016-04-24 19:44
543 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3控制文本</title>
<style>
p#shadow{
font-size:40px;
text-shadow: 2px 2px 4px blue;
}
p#yichu1{
text-overflow: clip;
overflow:hidden;
width:200px;
white-space:nowrap;
background-color: #ccc;
}
p#yichu2{
text-overflow:ellipsis;
overflow:hidden;
width:200px;
white-space:nowrap;
background-color: #ccc;
}
</style>
</head>
<body>
<p id="shadow">我爱我的家</p>
<p id="yichu1">设置文本的溢出结果,设置文本的溢出结果,设置文本的溢出结果。</p>
<p id="yichu2">设置文本的溢出结果,设置文本的溢出结果,设置文本的溢出结果。</p>
</body>
</html>
注意:设置文本阴影text-shadow属性值为color(字体的颜色)、length(阴影的水平延伸距离)、opacity(指定阴影作用的模糊距离)
指定格式:text-overflow:阴影水平距离(可取正负值) 阴影垂直偏移值(正负值) 阴影模糊值 阴影颜色
设置文本溢出text-overflow属性值为clip(不显示省略标记)、ellipsis(显示省略标记)
(要实现溢出时产生省略号的结果,必须将white-space设为nowrap以及将overflow:hidden)
<html>
<head>
<meta charset="UTF-8">
<title>css3控制文本</title>
<style>
p#shadow{
font-size:40px;
text-shadow: 2px 2px 4px blue;
}
p#yichu1{
text-overflow: clip;
overflow:hidden;
width:200px;
white-space:nowrap;
background-color: #ccc;
}
p#yichu2{
text-overflow:ellipsis;
overflow:hidden;
width:200px;
white-space:nowrap;
background-color: #ccc;
}
</style>
</head>
<body>
<p id="shadow">我爱我的家</p>
<p id="yichu1">设置文本的溢出结果,设置文本的溢出结果,设置文本的溢出结果。</p>
<p id="yichu2">设置文本的溢出结果,设置文本的溢出结果,设置文本的溢出结果。</p>
</body>
</html>
注意:设置文本阴影text-shadow属性值为color(字体的颜色)、length(阴影的水平延伸距离)、opacity(指定阴影作用的模糊距离)
指定格式:text-overflow:阴影水平距离(可取正负值) 阴影垂直偏移值(正负值) 阴影模糊值 阴影颜色
设置文本溢出text-overflow属性值为clip(不显示省略标记)、ellipsis(显示省略标记)
(要实现溢出时产生省略号的结果,必须将white-space设为nowrap以及将overflow:hidden)
相关文章推荐
- [读书笔记] CSS权威指南2: 结构和层叠
- 轮播图的实现
- 购物商城后台页面设计
- 【Qt】一段QPushButton的styleSheet样式分享
- H5+css3+js搭建带验证码的登录页面
- CSS 笔记
- 使用gulp-sass 和 gulp-livereload 自动编译sass文件
- 关于css布局的几篇文章
- css
- 上下DIV固定,中间DIV自适应的HTML+CSS实现
- CSS3D变换/立方体旋转效果
- css
- 【css基础】div父元素根据子元素高度自适应高度
- 【css基础】div父元素根据子元素高度自适应高度
- 动态替换css和js的方法
- css练习
- css
- 《CSS3实战》笔记--弹性盒模型(二)
- qt使用样式表修改控件属性
- CSS盒子模型