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

Question

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

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

Answer 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>

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

Can I limit the width of text inside of a <p>?

html

css

markdown

image

width