CSS - 设置段落前 3 行的样式？

Question

我正在尝试确定是否可以通过 CSS 始终设置段落前 3 行的样式。这需要考虑响应式布局，因此前 3 行将根据浏览器的宽度而变化。

我知道有::first-line，但是否可以操纵它来处理前 3 行？

::first-line

Answer 1

只是为了好玩，有时在花钱之前先检查一下 caniuse.com:

p {
  margin: 0 auto;
  width: 30%;
  text-align: justify;
  position: relative;
  background: white;
  color:black;
  overflow: hidden;
}

p:after {
  content: '';
  position: absolute;
  top: 3.9em;
  left: 0;
  bottom: 0;
  width: 100%;
  mix-blend-mode: overlay;
  background:rgba(255,255,255,0.8);/* rgba() as for a fallback */
  pointer-events:none;/* cause maybe text, forms and links deserve to be reached via the mouse ;) */
}

<p>Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>