根据文本长度对齐图标

Question

我有一个标题文本和一个图标。

如果标题可以容纳在单行中，我需要将图标左对齐。

如果标题超过 1 行，那么我必须将图标对齐到顶部。

我找到了一个使用 Javascript 的解决方案，方法是根据高度和线高附加一个动态 class。

有没有什么办法只使用 css 来实现？

Answer 1

这听起来像是可以用flex解决的问题。

您正在寻找属性flex-wrap 。 在您的情况下， flex 将使您的项目保持内联，除非一个变得太长，在这种情况下，它会将其包装到下一行。

CSS 代码如下所示：

.item{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}
.icon{
    flex-shrink:0;
}

HTML 应如下所示：

<div class="item">
    <div class="icon"></div>
    <div class="text">aaaaaaaaaa</div>
</div>
<div class="item">
    <div class="icon"></div>
    <div class="text">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
</div>

您的item将是您应该分配 flex 的项目。

Answer 2

将图标作为伪元素，就像我通过 css 添加的一样。

 div{ margin: 1em 0; border: 1px solid black; padding: 2em; position: relative; } div::before { position: absolute; left: 0; content:"icon"; }

 <div>My Content</div> <div>My Log ContenttttttttttttttttttttttttttttttttttttMy Log ContenttttttttttttttttttttttttttttttttttttMy Log ContenttttttttttttttttttttttttttttttttttttMy Log ContenttttttttttttttttttttttttttttttttttttMy Log ContenttttttttttttttttttttttttttttttttttttMy Log ContenttttttttttttttttttttttttttttttttttttMy Log ContenttttttttttttttttttttttttttttttttttttMy Log ContenttttttttttttttttttttttttttttttttttttMy Log Contentttttttttttttttttttttttttttttttttttt</div>

Answer 3

首先，在根元素中添加图标和文本元素。

<div class="root"> <div class="icon">Icon</div> <div class="text">Text</div> </div>

这个根元素 styles：

.root{ display: flex; flex-wrap: wrap; }