How to remove three dots from text-overflow: ellipsis?

Question

I am showing product title inside a <span>. I want the title to be truncated when there is no enough space. I tried text-overflow: clipping, but its not taking the padding which is applied on right side. So I used text-overflow: ellipsis, it works fine, but I don't wanna keep that "..." 3 dots at the end. Is there any way to hide or remove it by css?

Answer 1

You should try clip instead of clipping.

text-overflow:clip;

=====

EDIT:

This should fix your problem:

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