根据文本长度对齐图标答案

【问题标题】：aligning icon based on text length根据文本长度对齐图标
【发布时间】：2020-09-15 11:35:24
【问题描述】：

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

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

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

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

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

【问题讨论】：

有来自 url 的图标？

标签： javascript css angular flexbox css-grid

【解决方案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 的那个。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

此根元素样式：

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

【讨论】：