html - 如何使用 css 来缩短带有省略号的文本？

Question

基本上是标题中所说的。我希望用省略号缩短长字符串。

在我下面的示例中，我希望长度超过 100 像素的字符串被缩短。

因此字符串“This is my full name which should be shortened”应该显示为“This is my full name which...”并与尾随 2.000,00 EUR

我如何实现这一目标？

这是我的 HTML

<div class="don_single_donatori">
  <div class="viewport">
    <div class="overview">
      <p>This is my full name which should be shortend<em>2.000,00 EUR</em></p>
      <p>Anonymous<em>2.000,00 EUR</em></p>
      <p>Anonymous<em>500,00 EUR</em></p>
      <p>This is another long name that needs shortening<em>2.000,00 EUR</em></p>
      <p>Anonymous<em>2.000,00 EUR</em></p>
    </div>
  </div>

这是CSS

.don_single_donatori {
  width: 250px;
  min-height: 310px;
  border: 1px solid #E1E1E1;
  background-color: #fff;
  border-radius: 7px;
}

.overview em {
  font-style: normal;
  color: #000;
  float: right;
}

这是我的 example in jsfiddle

Answer 1

要截断你应该使用以下 css

text-overflow:ellipsis;width:100px;white-space: nowrap;overflow: hidden;

.

请找到下面的代码，您可以找到额外添加的 span 标记来拆分文本以进行截断。

HTML:

<div class="don_single_donatori"><div class="viewport">
<div class="overview">
  <p><span>This is my full name which should be shortend</span><em>2.000,00 EUR</em></p>
  <p><span>Anonymous</span><em>2.000,00 EUR</em></p>
  <p><span>Anonymous</span><em>500,00 EUR</em></p>
  <p><span>This is another long name that needs shortening</span><em>2.000,00 EUR</em></p>
  <p>Anonymous<em>2.000,00 EUR</em></p>
</div>

CSS:

    .don_single_donatori{
  width: 250px;
  min-height: 310px;
  border: 1px solid #E1E1E1;
  background-color: #fff;
  border-radius: 7px;
}

.overview span{
  text-overflow:ellipsis;
  width:100px;
  white-space: nowrap;
  overflow: hidden;
  display:inline-block;
}

.overview em {
  font-style: normal;
  color: #000;
  float: right;
}