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>

Answer 2

您可以在前三行中放置一个<span>，这不会改变行的显示类型，因为跨度是内联元素。然后给这个跨度一个类或id，并使用媒体查询启动该类或id。

例如，在较小的屏幕尺寸上，您可以这样做：

.intro-lines {
    font-size: 3em;
}

然后在较大的屏幕尺寸上，您可以将CSS属性重置为默认值：

@media (min-width: 801px) {

    .intro-lines {
        font-size: normal;
    }

}

CSS - 样式段落的前3行？

2 个答案: