Skip to content

第 98 期(W3C 标准-CSS-布局排版):首行文字自定义 #101

@wingmeng

Description

@wingmeng

上一期提到了 ::first-letter 这个伪元素,这一期介绍 ::first-line

::first-line 意为“首行文本”,利用它可以向文本的首行添加特殊样式,它会作用于设置元素中的第一行文本的样式,而不论该行出现多少单词。

<textarea>当前段落的首行文字为红色、加粗、微软雅黑字体。使用了 <code>::first-line</code> 伪元素。调整容器宽度,无论段落变成多少行,第一行文字始终是红色。
</textarea>
textarea {
  color: #666;
  resize: both;
}

textarea::first-line {color: red;}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions