纯css方式用省略号修饰多行文本

调整文本容器的高度， 用-webkit-line-clamp控制断线:2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

我以前遇到过这个问题，没有纯css解决方案

这就是为什么我开发了一个小型库来处理这个问题(以及其他问题)。标准库提供了用于建模和执行字母级文本呈现的对象。例如，您可以模拟带有任意限制的text-overflow:省略号(不一定只有一行)

请在http://www.samuelrossille.com/home/jstext.html上阅读更多截图、教程和下载链接。

这里所有的答案都是错的，他们漏掉了重要的部分，高度

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>

如果有人试图让线夹在flexbox中工作，那就有点棘手了——特别是当您使用非常长的单词进行折磨测试时。这段代码片段中唯一真正的区别是min-width: 0;在包含截断文本的伸缩项中，以及换行:断字;。向https://css-tricks.com/flexbox-truncated-text/致敬。免责声明:在写这个答案的时候，Chrome以外的浏览器支持很差。然而，从那时起，情况可能有所改善。

.flex-parent { display: flex; } .short-and-fixed { width: 30px; height: 30px; background: lightgreen; } .long-and-truncated { margin: 0 20px; flex: 1; min-width: 0;/* Important for long words! */ } .long-and-truncated span { display: inline; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word;/* Important for long words! */ } <div class="flex-parent"> <div class="flex-child short-and-fixed"> </div> <div class="flex-child long-and-truncated"> <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span> </div> <div class="flex-child short-and-fixed"> </div> </div>

http://codepen.io/AlgeoMA/pen/JNvJdx (codeen版本)

它是一个非标准的CSS，当前版本的CSS中没有涵盖它(Firefox不支持它)。尝试使用JavaScript。

迟回复，但一个html换行也可以，所以你可以做一个html + css唯一的解决方案。所以通常使用br元素是不好的做法，但如果你用br打断了注释，text-overflow省略号将从html文本的下一行开始。