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

你看我想把标题显示在一行中。亲爱的Stackoverflower，我该怎么做呢？

Answer 1

这个怎么样..我将<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>

Answer 2

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

＆＃13;

.card-title i {
    float: left;
    position: absolute;
    left: 20%;
    right: 0;
}

.card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 130px;
}

＆＃13;

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

＆＃13;

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

2 个答案: