文本超出省略
<style>
.cot {
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
/* -webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数。
它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才有效果
在大部分情况下，也需要设置 overflow 属性为 hidden, 否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号 (ellipsis ). */
</style>
</head>
<body>
<div style="width:200px; margin: 50px; border: 1px solid black;">
<p class="cot">
品牌愿景
茶在中国有5000年的文化积淀，但现代社会里人心浮躁，尤其是年轻人已经很少会花时间静啜一杯茶，奈雪希望通过简单的、符合现代人生活的方式将好茶带到每个人身边，成为中国茶文化走向世界的创新者和推动者。
品牌故事“奈雪的茶”名字的由来是因为创始人彭心的网名叫“奈雪”。彭心从自身体验出发，以自己手的握度尺寸打样，经过十八次开模，设计出符合女性纤细易握手感的“奈雪杯”。连不起眼的杯塞都会被细分为女生是爱心塞，男生是小太阳的图案。杯盖上有一个凹槽也是经过特别测试，女生可以避免口红粘在杯子上，设计十分贴心。
产品介绍寻·好茶奈雪推出了不同的产品系列，有霸气鲜果茶、芝士奶盖茶、现粹茶、冷泡茶、现泡高端茶等，另外每个月都会采用当季时令水果限期推出新品，水果过季时相应的产品也会下市。
</p>
</div>
</body>
