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

Question

I am showing product title inside a . 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?

Please post the code in a snippet (See illustration), jsFiddle.net, PenCode.io, or Plnkr.co — zer00ne
– zer00ne, Commented Dec 28, 2015 at 17:40
There are a couple of ways to track down an error like this. For example, run your CSS through a linter; or view the element in the style inspector in your debugger. Either way would show you the invalid property value. — user663031
– user663031, Commented Dec 28, 2015 at 18:54

herrh · Accepted Answer · 2015-12-28 18:19:54Z

11

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>

edited Dec 28, 2015 at 18:19

answered Dec 28, 2015 at 17:44

herrh

1,3781 gold badge17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

herrh Over a year ago

@Sivadass: Okay, hope the edited solution will help.

Sivadass N Over a year ago

Thanks @herrh, it works :) I have one doubt, is it wrong semantic to wrap a single line of text with inside a div??? Please clarify me this if you are free...

herrh Over a year ago

span is an inline element and used to style specific text parts of a paragraph. Can't you use instead of in your project? PS: Please accept the answer if it shows a working solution.

Sivadass N Over a year ago

Accepted the answer, but am still not clear why I should use instead of tag for a single line of text which is not going to be more than 20-24 Characters...

herrh Over a year ago

You are right. For shorts texts with 20-24 characters a will be the correct tag.

zer00ne · Accepted Answer · 2015-12-29 03:26:52Z

0

Made something different

Eliminated the text-overflow
Made the ' (500 Sheets)' string to CSS generated content a:after { content: ...
To hide it it's font-size: 0
On hover, the ' (500 Sheets)' is revealed.

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

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

edited Dec 29, 2015 at 3:26

answered Dec 28, 2015 at 19:23

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

3 Comments

Sivadass N Over a year ago

Title will vary for each product, so I can't only hide "500 sheets"?

zer00ne Over a year ago

I'll add different content and see how it looks.

zer00ne Over a year ago

Fair enough. herth's is the way to go. I came up with the same solution as he did, which is why I took an alternate route.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related