可调整大小的容器中的多行省略号

Question

我正在处理一张响应卡，它必须始终是正方形的。

当容器的尺寸减小时，卡片标题（下面屏幕截图中的红色）应该有一个省略号，以保持卡片正方形。

我怎样才能做到这一点？如果可能的话，我正在寻找一个纯CSS解决方案。

编辑：

HTML：

<div class="square">
  <div class="first-half"></div>
  <div class="second-half">
    <div class="buttons"></div>
    <div class="ellipsis-container">
      <p>Restaurant - Au Joyeux Codeur</p>
    </div>
  </div>
</div>

CSS：

.square
{
  background-color : #000;
    height: 48vw;
    width: 48vw;
}

@media only screen and (min-width: 601px)
{
    .square
    {
    height: 32vw;
    width: 32vw;
    }
}

@media only screen and (min-width: 993px)
{
    .square
    {
    height: 15vw;
    width: 15vw;
    }
}

.first-half
{
  height: 50%;
  background-color: #3f51b5;
}

.buttons
{
  height: 30px;
  background-color: #ffc107;
}

.ellipsis-container
{
  background-color: #f44336;
}
.ellipsis-container > p
{
  margin: 0;
  font-size: 1.5rem;
}

这是一个jsfiddle，其中一个正方形：https://jsfiddle.net/5512hxdv/5/

预期结果：

Answer 1

在这里。做了一些改变。检查出来

.square
  {
    background-color : #000;
    height: 48vw;
    width: 48vw;
    display: inline-block;
   }

 @media only screen and (min-width: 601px)
 {
 .square
      {
     height: 32vw;
     width: 32vw;
     }
 }

 @media only screen and (min-width: 993px)
 {
     .square
 {
 height: 15vw;
 width: 15vw;
 }
 }

 .first-half
 {
   height: 50%;
   background-color: #3f51b5;
 }
 .second-half
 {
   height: 50%;

 }
 .buttons
 {
   height: 50%;
   background-color: #ffc107;
 }

 .ellipsis-container
 { height: 50%;
   background-color: #f44336;
 }
 .ellipsis-container > p
 {
   margin: 0;
   height : 100%;
   text-overflow:ellipsis;
 }

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