<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="img/mynote.ico"/>
<title>overflow溢出处理</title>
<style type="text/css">
* {
/*word-break规定自动换行的处理方法
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行*/
word-break: normal;
overflow: hidden;
/*text-overflow规定当文本溢出包含元素时发生的事情
clip 修剪文本
ellipsis 显示省略符号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本*/
text-overflow: ellipsis;
}
#div1 {
width: 400px;
height: 400px;
background: gold;
/*hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*/
overflow: hidden;
}
#div2{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情</p>
<div id="div1">
<img src="img/少女.png" />
</div>
<div id="div2" title="shndjashdskadhsadkhsadjshak">
shndjashdskadhsadkhsadjshak
</div>
</body>
</html>