Styling dots on text-overflow: ellipsis

Inspired by this answer, here is a way of styling the ellipsis. The downsides of this solution are

  1. You have to re-assign your default text-styling
  2. You need one more <span> (or what ever) element 

.text-overflow
{
  color: blue;
  font-weight: bold;
  font-size: 20px;

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

.text-overflow > span
{
  font-weight: normal;
  color: black;
  font-size: 14px;
}
<div class="text-overflow"><span>Here is some very nice text indeed. So this is getting long</span></div>

I would recommend using :after but this might also replace for those without ellipsis.

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.truncate::after {
  display: block;
  font-weight: bold;
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
}
<div class="truncate">You may be starting to notice a trend from my recent articles here on HTML5 Hub. I’m a JS snob by trade, but by association I have to deal with my fair share of CSS issues. So, as an “outsider” looking in, I’m taking this opportunity to highlight some of the big “pain points” that CSS causes for various basic tasks in web dev. It’s not really intended as a criticism of the technology per se, but more a rallying cry to ask for standard solutions which remove our hacks.</div>

Not a hack-proof way, but my few cents.

Tags:

Html

Css

Recent Posts