Question

我想缩进图片下方的文字。这是我的原文。

Lorem ipsum dolor坐下来，精神上的精神。 Morbi blandit vehicula diam vitae dictum。 Nunc ut justo eu tellus scelerisque feugiat id non justo。 Ut eu ex id orci congue euismod。在效率nisi sed ante molestie，malesuada tristique ex accumsan。 Suspendisse non tempus sem，ut eleifend est。Cras bibendum mi non odio lacinia volutpat。整数interdum nisi quis porta posuere。 Nulla mollis，felis是一名auctor delctetur，leo orci venenatis magna，in eleifend quam lacus ac felis。 Sed sodales neque a euismod pulvinar。 Suspendisse non diam elementum arcu feugiat venenatis。 Nulla pulvinar，est ut eleifend hendrerit，tortor ipsum mattis eros，non feugiat diam lacus accumsan metus。 Suspendisse sollicitudin metus ac luctus consequat。 Nulla eget elit tincidunt，finibus ipsum nec，congue dui。 Curabitur ac scelerisque magna。 Duis sagittis varius sapien ut porta。 Quisque rhoncus dapibus ultrices。

Maecenas eu neque fermentum，sagittis ligula nec，dignissim nisi。 Maecenas et lectus lobortis quam blandit porta。 Praesent vel gravida ante。 Phasellus eu elit vitae nisi vulputate condimentum vel sit amet eros。 Pellentesque居民morbi tristique senectus et netus et malesuada fames ac turpis egestas。 Quisque non est sed magna ornare tristique。 Etiam aliquam sapien eu tellus laoreet luctus。 Aliquam viverra lectus quis metus mattis euismod。 Aenean faucibus ultrices nibh。在pretium ultrices中Fusce vestibulum mauris。

我希望缩进每个段落的第一行

顺便提一下，在段落上面有一张图片。

这是我的代码

<div class="caption"><img src="/html/images/sample-image.png" alt="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit vehicula diam vitae dictum. Nunc ut justo eu tellus scelerisque feugiat id non justo. Ut eu ex id orci congue euismod. In efficitur nisi sed ante molestie, malesuada tristique ex accumsan. Suspendisse non tempus sem, ut eleifend est. Cras bibendum mi non odio lacinia volutpat. Integer interdum nisi quis porta posuere. Nulla mollis, felis a auctor consectetur, leo orci venenatis magna, in eleifend quam lacus ac felis. Sed sodales neque a euismod pulvinar. Suspendisse non diam elementum arcu feugiat venenatis. Nulla pulvinar, est ut eleifend hendrerit, tortor ipsum mattis eros, non feugiat diam lacus accumsan metus. Suspendisse sollicitudin metus ac luctus consequat. Nulla eget elit tincidunt, finibus ipsum nec, congue dui. Curabitur ac scelerisque magna. Duis sagittis varius sapien ut porta. Quisque rhoncus dapibus ultrices. Maecenas eu neque fermentum, sagittis ligula nec, dignissim nisi. Maecenas et lectus lobortis quam blandit porta. Praesent vel gravida ante. Phasellus eu elit vitae nisi vulputate condimentum vel sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque non est sed magna ornare tristique. Etiam aliquam sapien eu tellus laoreet luctus. Aliquam viverra lectus quis metus mattis euismod. Aenean faucibus ultrices nibh. Fusce vestibulum mauris in pretium ultrices.<br><br>

我怎样才能在css代码中解决这个问题？有谁能解决我的问题？提前谢谢。

Answer 1

将这两个文本包装在<p>标记

中

<div class="caption">
    <img src="/html/images/sample-image.png" alt="">
    <p>Lorem ipsum</p>
    <p>Maecenas eu neque </p>
</div>

将来更容易对其应用css

Answer 2

以下是您的工作Pen。

你需要为段落写css。有关完整代码，请查看Pen Link Please

p .paragraph{
 word-wrap: break-word;
}

它解决了你的问题吗？

Answer 3

我会假设你想要这样简单的东西吗？

这个问题不是很具描述性。尽管如此，我已经做了一个完整的例子。只需运行代码段即可。

主要是，重要的是这个：

.indent {
  text-indent: 2em;
}

但我加入了额外的样式以使答案更加完整。

.caption-wrap {
  width: 400px;
  border: solid 2px #000;
  padding: 20px;
}

.caption-wrap p {
  margin: 0;
  margin-top: 10px;
}

.captioned-image {
  display: block;
  width: 300px;
  margin: 0 auto;
  border: solid 2px #000;
}

.indent {
  text-indent: 2em;
}

<div class="caption-wrap">
  <img class="captioned-image" src="https://static.pexels.com/photos/20974/pexels-photo.jpg" alt="Captioned Image">
  <p class="indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit vehicula diam vitae dictum. Nunc ut justo eu tellus scelerisque feugiat id non justo. Ut eu ex id orci congue euismod. In efficitur nisi sed ante molestie, malesuada tristique ex accumsan. Suspendisse non tempus sem, ut eleifend est. Cras bibendum mi non odio lacinia volutpat. Integer interdum nisi quis porta posuere. Nulla mollis, felis a auctor consectetur, leo orci venenatis magna, in eleifend quam lacus ac felis. Sed sodales neque a euismod pulvinar. Suspendisse non diam elementum arcu feugiat venenatis. Nulla pulvinar, est ut eleifend hendrerit, tortor ipsum mattis eros, non feugiat diam lacus accumsan metus. Suspendisse sollicitudin metus ac luctus consequat. Nulla eget elit tincidunt, finibus ipsum nec, congue dui. Curabitur ac scelerisque magna. Duis sagittis varius sapien ut porta. Quisque rhoncus dapibus ultrices.</p>

  <p class="indent">Maecenas eu neque fermentum, sagittis ligula nec, dignissim nisi. Maecenas et lectus lobortis quam blandit porta. Praesent vel gravida ante. Phasellus eu elit vitae nisi vulputate condimentum vel sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque non est sed magna ornare tristique. Etiam aliquam sapien eu tellus laoreet luctus. Aliquam viverra lectus quis metus mattis euismod. Aenean faucibus ultrices nibh. Fusce vestibulum mauris in pretium ultrices.</p>
</div>

Answer 4

为什么不在每行的开头使用制表符特殊字符

Answer 5

添加如下图像样式，并将每个段落包装在<p>标记

中

<style>
  .caption img{display:block}
</style>

<p>first paragraph</p>
<p>second paragraph</p>
...

我想缩进图片下面的文字

5 个答案: