<!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: 500px;
border: 1px solid black;
text-indent: 2em; /* 首行缩进2字 */
/* 下面三个必须搭配使用 */
overflow: hidden; /* 超出部分隐藏 */
white-space: nowrap; /* 多行文本在一行显示 */
text-overflow: ellipsis; /* 溢出部分用“……”显示 clip 溢出部分裁剪 */
}
samp{
color: red;
font-weight: bold;
font-style: italic;
font-size: 16px;
}
</style>
</head>
<body>
<div> <samp>多行文本显示一行超出不分用……代替。</samp>夜晚，微风拂过面颊。那一丝丝的触动让我明白：春，要来了。清晨出门，阳光普照大地，清风和煦，花草树木都来凑热闹，柳树也不例外。她让风帮她挽发，细长的发丝在风手中飘舞。没过多久，雨点滴到了地上。啊！这是春雨！是春天生机的象征！这一场春雨来的真是时候，简直是“好雨知时节，当春乃发生。”居然来的这么准时且恰巧。一声雷响，将世间万物都惊醒。生机勃勃的春天就要回来了。我已经准备好迎接春了。</div>
</body>
</html>
![Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令详解[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)