我可以限制 <p> 内的文本宽度吗？答案

【问题标题】：Can I limit the width of text inside of a <p>?我可以限制 <p> 内的文本宽度吗？
【发布时间】：2020-09-21 08:59:05
【问题描述】：

在 Markdown 中，图片被包裹在段落中。我希望图像比文本更宽并填充容器的更大宽度。我该如何解决这个问题？这是一个例子：https://sidey.now.sh/2019/08/31/difference-between-font-formats/

理想情况下，文本的宽度仅为 40rem。

【问题讨论】：

标签： html css image markdown width

【解决方案1】：

您可以使用 CSS 网格解决此问题：

.container {
  margin:0 50px;
  border:1px solid;
}
.container >p {
  display:grid;
  grid-template-columns:1fr minmax(0,20rem) 1fr;
}

/* this pseudo element will take the first column and force the text to be on the middle one */
p::before {
  content:"";
}
/**/

p > img {
  grid-column:1/span 3; /* the image should take all the 3 columns (full width) */
}

img {
 max-width:100%;
}

<div class="container">
<p>Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.</p>
<p><img src="https://images.unsplash.com/photo-1580792214064-6102bf1948d5?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2167&amp;q=80" alt="image"></p>
<p>Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.</p>
</div>

【讨论】：

谢谢！如果我希望文本位于第一列而图像位于所有 3 列中怎么办？
@DavidKlein 你不再需要 3 列，而只需要 2：jsfiddle.net/tz3mhgxr