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;
  }
}

成功解決