Question

我想缩进多行文本，以便所有行在背景图像之后开始。但是它现在被覆盖在图标上。

div {
  width: 400px;
}
p.mytext {
  text-indent: 20px;
  background: #8981C0 url(https://image.flaticon.com/icons/png/128/148/148767.png) no-repeat 10px;
  background-size: 30px 30px;
}

<div class="parent">
<p class='mytext'>
  perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut 
</p>
</div>

有人可以帮我实现吗？没有改变html。只有css解决方案才是首选。

Answer 1

只需在<p>标记中添加填充，因为它具有背景图像

＆＃13;

div {
  width: 400px;
}
p.mytext {
  background: #8981C0 url(https://image.flaticon.com/icons/png/128/148/148767.png) no-repeat 10px;
  background-size: 30px 30px;
  padding-left: 50px;
}

＆＃13;

<div class="parent">
<p class='mytext'>
  perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut 
</p>
</div>

＆＃13;

Answer 2

“第一行也可以与文本的其余部分对齐吗？”

从你的CSS中取出你的文字缩进

div {
  width: 400px;
}
p.mytext {
  background: #8981C0 url(https://image.flaticon.com/icons/png/128/148/148767.png) no-repeat 10px;
  background-size: 30px 30px;
  padding-left: 50px;
}

<div class="parent">
<p class='mytext'>
  perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut 
</p>
</div>

多行缩进文本之前的css背景图像

2 个答案: