当元素中内容溢出时的相关操作:
①处理溢出元素显示效果 (划框)
②处理溢出的元素用什么方式表示 (省略号 规定文本)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#a{
width: 200px;
height: 300px;
background-color:grey;
font-family: 楷体;
text-indent: 2em;
margin: 0 auto;
/* 默认情况下,元素溢出的内容会在元素之外显示*/
/* overflow:hidden :溢出部分的内容不显示 */
/* overflow: hidden; */
/* scroll:溢出的部分滚动显示 */
/* overflow: scroll; */
/* overflow-x:scroll :横排滚动显示 竖排不滚动 */
/* 竖排相同 */
overflow-y:scroll ;
}
#b{
width: 200px;
height: 30px;
background-color: grey;
position: relative;
bottom: 50px;
left: 30%;
font-family: 楷体;
/* 溢出的文本使用省略号提示 */
overflow: hidden;
/* 文本不会换行
相关链接:https://www.w3school.com.cn/cssref/pr_text_white-space.asp */
white-space: nowrap;
/* 溢出时的某些操作,下面是会在后面用...表示溢出文本 */
/* 相关链接:https://www.w3school.com.cn/cssref/pr_text-overflow.asp */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div id="a">非发斯蒂芬按时说的发生发生发送到发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿萨德发送到发送到
阿斯蒂芬阿斯蒂芬阿斯蒂芬阿萨德发送到发送到发送到发送到阿萨德fs啊水电费阿萨德发生发送到
发售的发售 发斯蒂芬啊说的发送到发送到蒂芬按时说的发生发生发送到发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿萨德发送到发送到
阿斯蒂芬阿斯蒂芬阿斯蒂芬阿萨德发送到发送到发送到发送到阿萨德fs啊水电费阿萨德发生发送到
发售的发售 发斯蒂芬啊说的发送到发送到发生 发斯蒂芬按时说的发生发生发送到发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿萨德发送到发送到
阿斯蒂芬阿斯蒂芬阿斯蒂芬阿萨德发送到发送到发发生 发斯蒂芬按时说的发生发生发送到发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿萨德发送到发送到
阿斯蒂芬阿斯蒂芬阿斯蒂芬阿萨德发送到发送到发送到发送到阿萨德fs啊水电费阿萨德发生发送到
发售的发售 发斯蒂芬啊说的发送到发送到发生 发送送到啊发送到按时发生发送到发生阿萨德发送到发生
</div>
<div id="b">阿斯顿发送到按时说的发生发生发送到发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿萨德发送到发送到
阿斯蒂芬阿斯蒂芬阿斯蒂芬阿萨德发送到发送到发送到发送到阿萨德fs啊水电费阿萨德发生发送到
发售的发售 发斯蒂芬啊说的发送到发送到发生 发</div>
</body>
</html>