css 实现响应式省略号（不固定宽度）

如何实现一行文本超出自动在末尾加省略号呢？

通常情况下是下面的代码：

width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
white-space: nowrap;

当我们需要一行隐藏文本，而且并不想设置宽度时，因为要实现响应式，该怎么办呢？

这时上面的代码就不生效了，因为上面的是建立在固定宽度的，那这时应该怎么办？

请使用以下代码：

  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;

效果如下：