.cut-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

如果你想把线条限制在3条以内，那么试试这个方法，在3条线之后，点就会出现。如果我们想增加线条，只需改变-webkit-line-clamp值，并给出div size的宽度。

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

是的，通过css3中的text-overflow属性。注意:它还没有被浏览器普遍支持。

希望这对你有帮助:

.text-with-dots { 显示:块; max-width: 98%; 空白:nowrap;} 溢出:隐藏!重要; 文本溢出:省略; ｝ <div class='text-with-dots'>这里有一些文本这里有一些文本这里有一些文本这里有一些文本这里有一些文本这里有一些文本</div>

隐藏文本加载和显示悬停

.hide-text { 宽度:70 px; 显示:inline-block; 空白:nowrap;} 溢出:隐藏!重要; 文本溢出:省略; ｝ 跨度:{徘徊 空白:设置; 文本溢出:设置; ｝ <span class="hide-text">如何用圆点隐藏文本，并在悬停时显示文本</span>

<style>
    .dots
    {
        display: inline-block;
        width: 325px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
</style>