实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本控制</title>
<style type="text/css">
p {
font-size: 30px;/*定义字体大小*/
font-weight: bold;/*定义粗体*/
font-family: georgia; /*定义字体*/
}
h1 {
text-align: center;
height: 100px;
line-height: 100px;/*定义行高,实现高度居中*/
background: #b5dde5;
font-family: 仿宋;
}
span {
font-size: 50px;
font-weight: bold;
font-family: georgia;
}
img {
height: 256px;
width: 200px;
}
b {
display: block;
width: 300px;
height: 60px;
background: #80ebff;
overflow: hidden;/*溢出隐藏*/
margin-bottom: 240px;
}
b:hover {
overflow: visible; /*默认值，内容不会被修剪，元素会被呈现*/
}
</style>
</head>
<body>
<h1>php中文网</h1>
<p>php中文网</p>
<hr>
<br>
<!--谷歌logo-->
<span style="color:#0388F1">G</span>
<span style="color:rgb(356,28,39,1)">o</span>
<span style="color:rgb(255, 232, 14,1)">o</span>
<span style="color:rgb(2, 138, 242,1)">g</span>
<span style="color:rgb(57, 255, 27,1)">l</span>
<span style="color:rgb(255, 232, 14,1)">e</span>
<hr>
<!--图文混排-->
<p style="display: inline-block;width: 300px;height: 400px;">
最近在沈阳的一条马路上，就出现了这样的一个交通“故事”，一个路人先是在马路上遛狗，然后在路过一个路口的时候，碰巧赶上旁边有一个在骑驴子在卖水果的摊位。结果这个狗就直接跑上前去把人家摊位的驴子给咬了。后来驴子被咬之后，估计也是被咬急了，驴子直接一脚又把在旁边停着的奥迪汽车给踢了一脚，直接又给前方的奥迪汽车尾部全都给踢碎了。然后狗主人也没管直接就抱着狗走了。结果这下好了，后来车主赶到之后，看见自己的车尾部碎成这样，那肯定也是不干了，然后就直接找来了警察叔叔。
</p>
<img src="images/1.jpeg">
<hr>
<img src="images/1.jpeg">
<b>最近在沈阳的一条马路上，就出现了这样的一个交通“故事”，一个路人先是在马路上遛狗，然后在路过一个路口的时候，碰巧赶上旁边有一个在骑驴子在卖水果的摊位。结果这个狗就直接跑上前去把人家摊位的驴子给咬了。后来驴子被咬之后，估计也是被咬急了，驴子直接一脚又把在旁边停着的奥迪汽车给踢了一脚，直接又给前方的奥迪汽车尾部全都给踢碎了。然后狗主人也没管直接就抱着狗走了。结果这下好了，后来车主赶到之后，看见自己的车尾部碎成这样，那肯定也是不干了，然后就直接找来了警察叔叔。
</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码：
重点：
font-size: 30px;/*定义字体大小*/
font-weight: bold;/*定义粗体*/
font-family: georgia; /*定义字体*/
line-height: 100px;/*定义行高,实现高度居中*/
overflow: hidden;/*溢出隐藏*/
overflow: visible; /*默认值，内容不会被修剪，元素会被呈现*/
