有没有一种方法可以将css样式应用到一组元素中，就像(文本溢出：省略号)？

e0bqpujr 于 2023-02-10 发布在其他

关注(0)|答案(1)|浏览(110)

我在div中有几个元素

<div class="progress-titles-wrapper">
                                <a href="#" class="progress-title">Earned</a>
                                <a href="#" class="progress-title">Sick</a>
                                <a href="#" class="progress-title">Annual</a>
                                <a href="#" class="progress-title">Earned</a>
                                <a href="#" class="progress-title">Sick</a>
                                <a href="#" class="progress-title">Annual</a>
                                <a href="#" class="progress-title">Earned</a>
                                <a href="#" class="progress-title">Sick</a>
                                <a href="#" class="progress-title">Annual</a>
                                <a href="#" class="progress-title">Earned</a>
                                <a href="#" class="progress-title">Sick</a>
                                <a href="#" class="progress-title">Annual</a>
                                <div class="seeMore d-flex align-items-center">
                                    <a href="#">See More</a>
                                </div>
                            </div>

我想说明其中一些取决于屏幕宽度，其余的将（溢出：隐藏），并放置3个点...并显示最后一个（见更多），以打开包含所有进度标题div的弹出窗口。
我的CSS：

.progress-titles-wrapper{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
    width:calc(100% - 200px);
    display:flex;
    flex-wrap: nowrap;
}

我想最终代码显示此

这是https://jsfiddle.net/yousefsalama14/2ur9w4jo/1/的现场演示

css

来源：https://stackoverflow.com/questions/75398197/is-there-a-way-to-apply-css-style-to-group-of-elements-working-like-text-overfl

1条答案

按热度按时间

30byixjq1#

它一点也不完美，但我有一个可能解决方案：在我的例子中，你的列表可以滚动超过1000px的屏幕宽度，在它下面你有一个带前导点的按钮。

a {
  text-decoration: none;
}

.progress-titles-wrapper {
  display: flex;
  margin-bottom: 2rem;
  flex-wrap: nowrap;
  position: relative;
}

.progress-titles-wrapper .progress-title {
  background-color: #296dac1a;
  border: 1px solid #296dac3b;
  padding: 0.5rem 1rem;
  color: #333;
  margin-right: 1rem;
}

.seeMore {
  background-color: #296dac1a;
  padding: 0.5rem 1rem;
  border-radius: 3px;
  border: 1px solid #296dac3b;
  align-items: center;
  color: #337ab7;
  position: absolute;
  right: 0;
  display: none;
}

.seeMore::before {
  content: '...';
  display: block;
  width: 50px;
  height: 100%;
  position: absolute;
  left: -24px;
  bottom: -10px;
}

.progress-titles {
  position: relative;
  width: 100%;
  display: flex;
  overflow-x: auto;
  box-sizing: border-box;
  padding-right: var(--titles-spacer);
}

@media only screen and (max-width: 1000px) {
  .progress-titles {
    --titles-spacer: 135px;
    width: calc(100% - var(--titles-spacer));
    overflow: hidden;
    padding-right: var(--titles-spacer);
  }

  .seeMore {
    display: flex;
  }
}

<div class="progress-titles-wrapper">
  <div class="progress-titles">
    <a href="#" class="progress-title">Earned</a>
    <a href="#" class="progress-title">Sick</a>
    <a href="#" class="progress-title">Annual</a>
    <a href="#" class="progress-title">Earned</a>
    <a href="#" class="progress-title">Sick</a>
    <a href="#" class="progress-title">Annual</a>
    <a href="#" class="progress-title">Earned</a>
    <a href="#" class="progress-title">Sick</a>
    <a href="#" class="progress-title">Annual</a>
    <a href="#" class="progress-title">Earned</a>
    <a href="#" class="progress-title">Sick</a>
    <a href="#" class="progress-title">Annual</a>
  </div>

  <div class="seeMore d-flex align-items-center">
    <a href="#">See More</a>
  </div>
</div>

赞(0）回复(0）举报 2023-02-10

我来回答

有没有一种方法可以将css样式应用到一组元素中，就像(文本溢出：省略号)？

1条答案

相关问题

热门标签

最新问答