<!DOCTYPE html>
<meta charset="utf-8" />
<title>标题</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
.text-overflow{
width: 200px;
height: 40px;
border: 1px solid red;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div class="text-overflow">CSS3中通过text-overflow来设置文字超出指定长度后变成省略号，但还有三个条件就是：固定长度、超出隐藏、文本不换行。CSS3中通过text-overflow来设置文字超出指定长度后变成省略号，但还有三个条件就是：固定长度、超出隐藏、文本不换行。</div>