省略号不适用于带有 flex 的引导程序

Posted 2023-03-21

【中文标题】省略号不适用于带有 flex 的引导程序

【英文标题】：ellipsis not working on bootstrap with flex

【发布时间】：2021-10-07 15:17:50

【问题描述】：

我正在尝试在 2 行图标后添加省略号，html 如下。我通过浏览许多页面尝试了各种组合。就像将 min-width 更改为 0 等一样。现在看来，所有的努力似乎都是徒劳的。因此，我变成了一些专家的眼睛，请看一下

.ellipsis 
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        



.gicon
            background-repeat:no-repeat;
            background-position: center center;
            background-size: auto 100%;
            height: 32px;
            width: 32px;
            align-self: center;
        

    <div class="row facilityRow">
                                        <div class="col d-flex align-content-start flex-wrap ellipsis">
                                            <div class="d-flex flex-column mr-3">
                                                <i class="gicon" path="001-meditation" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Mediation"></i>
                                                <small>Mediation</small>
                                            </div>
                                            <div class="d-flex flex-column mr-3">
                                                <i class="gicon" path="003-yoga" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Yoga"></i>
                                                <small>Yoga</small>
                                            </div>
    </div>
</div>

【问题讨论】：

无法以您看到的方式看到它。如果您使用的是外部图标库，能否包含链接？或者，如果它们是自定义图标，则提供您所看到内容的图片以及您期望的行为示例

Desipte 你在 *** 上已经 8 年了，你甚至都懒得去格式化你的代码。我认为如果你这样做并包含你使用的库，你可能会得到更多的答案。

@mahan 为什么你这么关心我在 *** 上的岁月？听起来很有趣，哈哈。顺便说一句，我从编辑器中复制了代码，在这里我应用了代码标签。

【参考方案1】：

首先，不要使用small。使用不设置文本格式的元素，例如p。

您需要限制其直接父级的宽度。如果x 轴上有足够的空间，则它不起作用。

.ellipsis 
  width: 100%;
  max-width: 32px;


.ellipsis p 
  overflow: hidden;
  text-overflow: ellipsis;

<div class="row facilityRow">
  <div class="col d-flex align-content-start flex-wrap">
    <div class="d-flex flex-column mr-3">
      <i class="gicon" path="001-meditation" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Mediation"></i>
      <div class="ellipsis">
        <p>Mediation</p>
      </div>
    </div>
    <div class="d-flex  mr-3">
      <i class="gicon" path="003-yoga" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Yoga"></i>
      <div class="ellipsis">
        <p>Yoga</p>
      </div>
    </div>
  </div>
</div>

【讨论】：

谢谢，试一试。我以其他方式修复了

@Aadam 你能发布你的解决方案吗？有人可能会觉得它有帮助。