how can I add only ellipsis and remove original text

Question

I am trying to make breadcrumbs that looks like

My final goal is Item1/.../.../Item4

So I was able to make Ite... but I want to make it only ... like example above. please provide code example(it helps me a lot since I am beginner in css/html) Thank you!

what I had tried..

//index.html
<ul class="breadcrumbs">
 <li class="breadcrumbs__item">Item 1</li>
 <li class="breadcrumbs__item">Item 2</li>
 <li class="breadcrumbs__item">Item 3</li>
 <li class="breadcrumbs__item">Item 4</li>
</ul>

css

.breadcrumbs {
 &__item {
   white-space: nowrap;
   text-overflow: "[...]";// or ellipsis;
   max-width: 10px;
   display: block;
   overflow: hidden;
 }
}

You should provide what you already have and where the issue is. This site is about helping people with their issues rather than a writing service where you can request what you need :) — Adrian, Aug 03 '22 at 09:06

Cédric · Accepted Answer · 2022-12-02T10:49:06.223

The best way I found is by wrapping the items inside spans to hide them, according to this stack. You need it because you can't add :before and :after pseudo elements to a display:none element.

Then you can :

display:none spans that are not the first and last items
add ... to the elements that are not the first and last items
add / after every elements that are not the last one

note : ul{font-size: 0;} and li{font-size: initial;} are to remove some unecessary space

ul{
  padding: 0;
  font-size: 0;
}
li{
  display: inline-block;    
  font-size: initial;
}

li:not(:first-child):not(:last-child) span{
  display: none;
}
li:not(:first-child):not(:last-child):before{
  content: "...";
}
li:not(:last-child):after{
  content: "/";
}

<ul>
  <li><span>Item 1</span></li>
  <li><span>Item 2</span></li>
  <li><span>Item 3</span></li>
  <li><span>Item 4</span></li>
</ul>

how can I add only ellipsis and remove original text

1 Answers1