/*
overflow有5个有效值:
visible:默认值,从父元素继承overflow属性的值;
hidden:内容会被修剪,并且超出的内容不可见;
inherit:内容不会被修剪,会呈现在元素框之外;
scroll:内容会被修剪,浏览器会显示滚动条以便查看超出的内容;
auto:由浏览器定夺,如果内容被修剪,就会显示滚动条。
*/
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;
}
/*
overflow有5个有效值:
visible:默认值,从父元素继承overflow属性的值;
hidden:内容会被修剪,并且超出的内容不可见;
inherit:内容不会被修剪,会呈现在元素框之外;
scroll:内容会被修剪,浏览器会显示滚动条以便查看超出的内容;
auto:由浏览器定夺,如果内容被修剪,就会显示滚动条。
*/