выравнивание значка по длине текста

Question

У меня есть текст заголовка и значок.

Мне нужно выровнять значок по левому краю, если заголовок можно разместить в одной строке.

Если заголовок занимает более одной строки , то мне нужно выровнять значок по верхнему краю.

Я нашел решение, используя Javascript, добавив класс Dynami c на основе высоты и высоты строки.

Есть ли каким-либо способом достичь только с помощью 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

Сначала вы добавляете значки и текстовые элементы в элемент root.

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

Стили этого элемента root:

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

Answer 3

Иметь иконку как псевдоэлемент, как я добавил через 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>