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

时间:2015-12-28 17:39:11

标签: css

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

2 个答案:

答案 0 :(得分:6)

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

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>

答案 1 :(得分:0)

做出不同的东西

  • 取消text-overflow
  • 制作&#39; (500张)&#39;字符串CSS generated content a:after { content: ...
  • 隐藏它font-size: 0
  • 在悬停时,&#39; (500张)&#39;透露。

&#13;
&#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;
&#13;
&#13;