1、单行文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改变样式</title>
<link rel="stylesheet" href="common.css">
<style>
.box {
width: 8rem;
overflow: hidden;
white-space: nowrap; /* 规定段落中的文本不进行换行 */
text-overflow: ellipsis;
font-size: 14px;
}
</style>
</head>
<body>
<div class="box">linux下安装hadoop时解压hadoop没有etc文件夹</div>
</body>
</html>
效果如下:
2、多行文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改变样式</title>
<link rel="stylesheet" href="common.css">
<style>
.box {
width: 300px;
height: 100px;
line-height: 25px;
background: #eeeeee;
font-size: 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /*如果为3,会在第三行末尾显示省略号*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">这少年便是闰土。我认识他时,也不过十多岁,离现在将有三十年了;那时我的父亲还在世,家景也好,我正是一个少爷。那一年,我家是一件大祭祀的值年。这祭祀,说是三十多年才能轮到一回,所以很郑重。</div>
</body>
</html>
效果如下:
以上。