我怎样才能只添加省略号并删除原始文本答案

【问题标题】：how can I add only ellipsis and remove original text我怎样才能只添加省略号并删除原始文本
【发布时间】：2022-12-02 18:57:31
【问题描述】：

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 :)
sure let me edit this right now!

标签： html css sass

【解决方案1】：