Question

我在<span>内显示产品标题。我希望在没有足够的空间时截断标题。我尝试了text-overflow: clipping，但它没有采用右侧应用的填充。所以我使用text-overflow: ellipsis，它工作正常，但我不想保持那个“...”最后3个点。是否有任何方法可以通过CSS隐藏或删除它？

Answer 1

你应该尝试剪辑而不是剪辑。

text-overflow:clip;

=====

编辑：

这可以解决您的问题：

.clipping-wrapper {
    border: 1px solid #4099ff;
    padding: 0 40px;
    display: inline-block;
}
.clipping{
    white-space: nowrap; 
    width: 200px; 
    overflow: hidden;
    text-overflow: clip; 
}

<div class="clipping-wrapper">
  <p class="clipping">
    Copier Paper A4 Size - 70Gsm (500 Sheets)
  </p>
</div>

Answer 2

做出不同的东西

取消text-overflow
制作＆＃39; （500张）＆＃39;字符串CSS generated content a:after { content: ...
隐藏它font-size: 0
在悬停时，＆＃39; （500张）＆＃39;透露。

＆＃13;

.clip {
  float: left;
  display: inline-block;
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  border: 1px solid #4099ff;
  padding: 0 40px;
}
.clip.a:after {
  content: ' (500 Sheets)';
  display: inline-block;
  font-size: 0;
}
.clip.b:after {
  content: ' (Free Recycling)';
  display: inline-block;
  font-size: 0;
}
.clip.c:after {
  content: ' (20 per Box)';
  display: inline-block;
  font-size: 0;
}
.clip.d:after {
  content: '';
  display: inline-block;
  font-size: 0;
}
.clip:hover {
  overflow: visible;
  padding-right: 80px;
}
.clip:hover:after {
  font-size: 1rem;
  background-color: inherit:
}

＆＃13;

<div>
  <span class="clip a">
    Copier Paper A4 Size - 70Gsm
  </span>
</div>

<div>
  <span class="clip b">
    3M Copy Toner Cartridge - 
  </span>
</div>

<div>
  <span class="clip c">
    No. 2 Graphite Pencils - 
  </span>
</div>

<div>
  <span class="clip d">
   Paper Clips - 200 per Box
  </span>
</div>

＆＃13;

如何从文本溢出中删除三个点：省略号？

2 个答案: