如何缩短文本宽度以不占用容器宽度

Question

我有一个div，它位于具有填充的.wrapper中。使文本不占据.box1的整个宽度的最佳做法是什么？

.wrapper {
padding-inline: 50px;
}
.box1 {
background-color: orange;
}

<div class="wrapper">
<div class="box1">
<p>
=Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
</p>
</div>
</div>

我考虑了两种选择，

1. 围绕.box1创建另一个包装，然后设置.box1的宽度，我不喜欢这样，因为您正在失去标记语义。

2. 在.box1的右边放一个透明的浮动来限制行框，但这似乎有点棘手，例如

.box1 {
background-color: orange;
}
.wrapper {
padding-inline: 50px;
}
p::before {
content: "";
width: 100px;
float: right;
height: 200px;
background-color: transparent;
}

<div class="wrapper">
<div class="box1">
<p>
=Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
</p>
</div>
</div>

Answer 1

为.box 添加填充

.box1 {
background-color: orange;
padding: 10px;
}

所以你在所有方向上都有10px的空间，你可以用填充规则添加不同的空间大小，填充：10px 20px 30px 40px意味着顶部10px，右侧20px，底部30px和左侧40px的空间。

如果您希望包装器和box1之间有空格，请将边距设置为box1

请更详细地告诉你想要什么