如何使“text-overflow：ellipsis”与另一个浮动元素一起使用

Question

<div class="card-content"> 
  <span class="card-title activator grey-text text-darken-4">
    Anohana: The Flower We Saw That Day
    <i class="material-icons right">comment</i> 
  </span>
  <p>あの日見た花の名前を僕達はまだ知らない。</p>
</div>

<i class="material-icons right">comment</i>有一个float:right财产。

当文字“Anohana：我们看到的那一天的花”太长时，它看起来像这样：Original

我想文本“Anohana：我们看到的那一天的花”太长了它显示为省略号，像这样：Hope

所以我添加了这样的CSS：

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

不幸的是，它现在显示如下：Reality

你看，我希望图标显示在标题的一行中。亲爱的Stack Overflow，我怎么能做到这一点？

Answer 1

试试这个。你可以使用下面的css调整宽度和图标位置。

.card-title i {
    float: left;
    position: absolute;
    left: 20%;
    right: 0;
}

.card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 130px;
}

<p class="card-title">
    Anohana: The Flower We Saw That Day
  <i>icon</i>
  </p>

Answer 2

怎么样..我把<span>改成<div>并加上你的css。

Codepen

.card-title {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  width: 10em;
}

<div class="card-title">
    Anohana: The Flower We Saw That Day
    
  </div>