目录
一、原理
1.显示的区域最大宽度是固定的,所以当文字溢出时需要①隐藏,②用其他符号(如:省略号)提示用户没有显示完整,③是否允许换行
.textoverflow {
/* 隐藏溢出的文字 */
overflow: hidden;
/* 用省略号代替隐藏的文字,表示文字溢出 */
text-overflow: ellipsis;
/* 不换行 */
white-space: nowrap;
}
注:目前仅火狐浏览器支持用 其他符号 代替隐藏的文字;text-overflow: string//字符串,其他浏览器目前都不支持。
*火狐浏览器效果:
2.用户希望看到完整内容:鼠标hover时,显示完整内容
在html标签中添加title属性:值为要显示的完整内容
<div class="textoverflow" title="ccccccccc cccccccccccccccccccc">ccccccccccc cccccccccccccccccc</div>
二、完整代码
<!-- 文本溢出处理 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本溢出处理</title>
<style>
div {
width: 40px;
margin: 20px;
}
.wrap {
width: 10%;
background: #eee;
}
.items {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.textoverflow {
/* 隐藏溢出的文字 */
overflow: hidden;
/* 用*代替隐藏的文字,表示文字溢出 */
text-overflow: ellipsis;
/* 不换行 */
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrap">
<div class="items">
<div class="textoverflow" title="aaa">aaa</div>
<div class="textoverflow" title="bbb">bbb</div>
<div class="textoverflow" title="ccccccccc cccccccccccccccccccc">ccccccccccc cccccccccccccccccc</div>
<div class="textoverflow" title="ddd">ddd</div>
</div>
<div class="items">
<div>111</div>
<div>222</div>
<div>3333333333333333333333333</div>
<div>444</div>
</div>
</div>
</body>
</html>
三、最终效果
第一个矩形框中做了溢出处理,第二个没有溢出处理。
/*
希望对你有帮助!
如有错误,欢迎指正!
*/