html - 父容器中的段落定位

Question

我有一个 comp 需要编写代码，而这个特定领域正在变成一个真正的痛苦。如果您查看排版，您会发现文本的第一行和最后一行大约有 50% 位于容器之外。

我可以在 CSS 中使用精确的数学来实现这一点，但正如您可以想象的那样，随着文本在不同的浏览器尺寸上换行，数学需要改变以保持设计的完整性。这很快就会成为媒体查询的噩梦。

有没有更好的方法来实现这种效果，同时在浏览器调整大小时保持设计不变？

body {
  background-color: black;
}

.container {
  width: 500px;
  height: 190px;
  padding: 0 50px;
  background-color: gray;
}

p {
  color: white;
  background-color: green;
  position: relative;
  top: -10%;
  font-size: 32px;
  line-height: 1.15;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quo voluptatibus enim doloremque ab illum nam consequuntur nihil, vel magni ipsa maxime numquam odio explicabo!</p>
</div>

Answer 1

我无法让它在代码片段中工作，但这是我在本地工作的。

尽管使用 ::before...

CSS:

    body {
        background-color: black;
    }

    .container {
        width: 500px;
        height: 190px;
        padding: 0 50px;
    }

    p {
        color: white;
        /* background-color: green; */
        position: relative;
        font-size: 32px;
        line-height: 1.15;
    }

        p::before {
            content: ' ';
            background-color: gray;
            position: absolute;
            top: 0.5em;
            bottom: 0.5em;
            left: 0;
            right: 0;
            font-size: 32px;
            z-index: -1;
        }

html:

<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quo voluptatibus enim doloremque ab illum nam consequuntur nihil, vel magni ipsa maxime numquam odio explicabo!</p>
</div>