如何在图标后对齐多行文字

Question

在带缩进（树数据）的表中，我需要将第二行与第一行对齐。

注意，文字“Tail”不与“Long”对齐

在这里创建了一个类似的例子

div{
  width:400px;
}

<div>
  <a href="">ICon:</a>
  <span>This is my fight song. Take back my life song. Prove I'm alright song. My power's turned on
Starting right now I'll be strong</span>    
</div>

Answer 1

您可以使用display: table;和display: table-cell;

执行此操作

div{
  width:400px;
  border: 1px solid black;
  display: table;
  padding: 10px;
}

a, span {
  display: table-cell;
  vertical-align: top;
}

<div>
  <a href="">ICon:</a>
  <span>This is my fight song. Take back my life song. Prove I'm alright song. My power's turned on
Starting right now I'll be strong</span>    
</div>

Answer 2

如果您使用的是引导程序，则可以使用如下所示的行和列进行操作：

<div className="text-wrap row"><div className="col-1 "><FontAwesomeIcon icon={faCheckCircle} size="lg"/></div><div className="col-11">This Is my fight Song This Is my fight Song This Is my fight Song This Is my fight Song This Is my fight Song This Is my fight Song This Is my fight Song This Is my fight Song This Is my fight Song</div></div>