Html 如何使用文本溢出：div全高中的省略号

我试图在div块中显示一个长文本，如果文本超过div高度，则需要显示“…”，否则将整个文本填充到块中。但问题是，使用css文本溢出：省略号会将整个长文本剪切成一行文本，并将这些点放置在可以在下面的空间中写入更多文本的位置

<div  class="hide-long-text">

这是一个小提琴手 有人能给我一个提示，我如何使用这个空闲空间，当文本超过div高度时，显示“…”

请尝试代码：

div{
宽度：200px；
高度：100px；
线高：20px；
单词break：打破一切；
背景色：天蓝色；
显示：-网络工具包盒；
-网络工具包盒方向：垂直；
-莫兹盒方向：垂直；
-ms盒方向：垂直；
盒子方向：垂直；
-webkit线夹：5个；
-moz线夹：5个；
-ms线夹：5个；
线夹：5个；
溢出：隐藏；
}
你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！

尽管如此-webkit线夹在这种情况下工作。在本例中，限制为5行。因此，请确保在使用它时，高度是固定的，并且线条高度匹配。有关跨浏览器的支持，请参阅。在这个问题中有更多的答案。关于css属性的一些解释可能会有所帮助

.hide-long-text {
   height: 80px;
    width: 110px;
    border: 1px solid #adb8c0; 
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}