/*
text-overflow有两个有效值:
clip:默认值,表示在内容区域的极限处截断文本;
ellipsis:表示用一个省略号(“…”)来表示被截断的文本。
强制不换行 white-space:nowrap;
隐藏超出部分 overflow:hidden;
用省略号代替剩余内容 text-overflow:ellipsis;
*/
HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<!--系统内置 start-->
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<!--系统内置 end-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./index.css" />
<title>单行文本超出省略</title>
</head>
<body>
<div class="container">
<div class="title">
如何评价罗永浩 2019 年 12 月 3
日举办的「老人与海」黑科技发布会?是否达到了你的预期?
</div>
<div class="txt">
罗永浩的「老人与海」黑科技发布会于 12 月 3 日 19:30
正式举行,这场发布会罗永浩发布了什么?是否达到了你的预期?
</div>
</div>
</body>
</html>
CSS部分:
.container .title {
color: #1a1a1a;
font-size: 18px;
line-height: 28px;
font-weight: 600;
margin-bottom: 10px;
}
.container .txt {
color: #444;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*
text-overflow有两个有效值:
clip:默认值,表示在内容区域的极限处截断文本;
ellipsis:表示用一个省略号("…")来表示被截断的文本。
*/
/*强制不换行 white-space:nowrap;*/
/*隐藏超出部分 overflow:hidden;*/
/*用省略号代替剩余内容 text-overflow:ellipsis;*/