html - 元素左侧的边距文本如何？

Question

里面有span带图标的块：

<span><i></i>Text</span>

图标有 CSS：

i {
   display: inline-block;
   width: 20px;
   height: 20px;
}

如果text很长，它将换行到 icon 下的下一行i。

如何用左边距换行文本：图标的宽度

我现在有这个：

Icon - Text he
re

但是我需要：

Icon - Text he
       re

标签： htmlcss

Answer 1

绝对定位

span {
  position: relative;
  padding-left: 25px;
  width: 200px;
  display: inline-block;
  border: 1px solid red;
  margin: 1em;
}

i {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  background: pink;
}

<span><i>I</i>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, quam.</span>