根據文本長度對齊圖標

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; }