<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出</title>
<style type="text/css">
.redDiv{
width: 300px;
height: 300px;
border: 1px solid red;
font-size: 50px;
/*处理超出区域的内容
hidden 隐藏
visible 显示，默认值
scroll 滑动
auto 自动
auto 和 scroll 的区别在于 scroll始终显示滚动条，auto 只会在内容超出的方向显示滚动条
*/
/*atfer 伪类 内容后添加内容*/
overflow: auto;
/*text-overflow 处理某一个超出区域的单词
clip 超出的部分剪裁掉
ellipsis 超出的部分用省略号代替
string 指代用一个字符串代替，字符串的内容自己定义，部分浏览器可用
使用text-overflow 前确保overflow不是visible*/
text-overflow: clip;
}
</style>
</head>
<body>
<div class="redDiv">
wedwadsadads adasa
wedwa dsadads adasa
wedwadsad adsadasa
wedwa dsadadsadasa
</div>
</body>
</html>
网友评论