flex布局下，css设置单行文本不换行时，省略号不显示的解决办法

问题：正常情况下，要设置单行文字超出省略号显示，加三个属性
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
但是这个地方是从两行改成一行，网上搜了很多答案，要改父元素的width：0;之类的，经css挨个排查 发现去掉.title里的display就好了。

一开始试了display各个属性，但是没有加!important，这是第一个问题，加上!important后，必须是block,inline,inline-block都不行，没理解为什么

这是写的移动端的页面
代码
html

<li class="row">
                <img src="./images/editor.jpg" alt="" class="photo">
                <div class="textarea">
                    <p class="title">From the eyes of the world,you can see at a glance.</p>
                    <p class="c9">test</p>
                </div>
</li>

css

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  overflow: hidden;
}
.textarea {
  flex: 1;
  font-size: 14px;
  color: #333;
}
/* 控制两行文本 超出部分省略号 */
.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

现在要在pc端的情况下 title 只显示一行，超出部分加省略号，用媒体查询改成pc的尺寸

@media screen and (min-width: 960px) {
  .contanier {
    max-width: 728px;
  }
  .row {
    width: 48%;
  }
  .row:nth-child(odd) {
    margin-right: 24px;
  }
  .textarea {
    width: 0;     //重点
  }
  .title {
    display: block !important;     //重点
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

成功解决