Question

基本上标题中的内容。我希望用椭圆缩短长字符串。

在我的下面的例子中，我想要缩短字符串，比让我们说100 px缩短。

所以字符串“这是我的全名应该是短的”应该显示为“这是我的全名...”并保持与尾随 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

text-overflow属性指定应如何向用户发出未显示的溢出内容的信号。它可以被剪裁，显示省略号（...）或显示自定义字符串。

文本溢出需要以下两个属性：

white-space：nowrap; 溢出：隐藏;

供参考 https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

＆＃13;

.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;
}
.overview p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

＆＃13;

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

＆＃13;

Answer 2

截断你应该使用以下css

text-overflow：省略号;宽度：100px; white-space：nowrap; overflow：隐藏;

。

请找到下面的代码，你可以找到另外添加的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;
}

Answer 3

在p标签上使用以下样式

prepend-modulo.bat "data.csv" > "data_mod.csv"

Answer 4

您可以使用：

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

如果width大于100px，则结果将是文字并在3点（...）之后更多text-overflow：https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

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

4 个答案: