将宽度应用于 :first-line

Question

我想要一个第一行比其余部分短的标题。
这是一些 code:

div {
  width: 20em;
  border: 1px solid #000;
}
h3:first-line {
  background-color: yellow;
  width: 10em;
}

<div><h3>Lorem ipsum dolor sit amet who made up this fake Latin text</h3></div>

第一行突出显示可以应用 background-color，但不幸的是不能应用宽度。
如何为 :first-line 伪元素应用宽度？

Answer 1

您不能指定 ::first-line 伪元素的宽度。有关可应用于 ::first-line 的属性列表，请参阅 MDN ::first-line。

解决方法：

您可以使用右浮动伪元素缩短第一行：

div {
  width: 20em;
  border: 1px solid #000;
  line-height: 1.2em;
}
h3:first-line {
  background-color: yellow;
}
h3:before {
  content: '';
  float: right;
  width: 10em;
  height: 1em;
}

<div><h3>Lorem ipsum dolor sit amet who made up this fake Latin text</h3></div>

Answer 2

div {
    width: 20em;
    border: 1px solid #000;
}
h3{
    background-color: yellow;
text-indent: 50px;
}

请将您的 css 更改为以上 css

Answer 3

我最近创建了这个解决方案。我在接受的答案的修改代码上展示它。如您所见，不需要 :first-line selector 或 :before 伪元素。百分比用于右侧的间隙。如果您使用过例如。 text-indent: 33.3% 它会使第一行宽为可用 space.

的 2/3

div {
  width: 20em;
  border: 1px solid #000;
  line-height:1.2em;
}
h3 {
  direction: rtl;
  text-align: left;
  text-indent: 50%;
}

<div>
    <h3>Nam quis eros eu urna commodo dignissim. Integer nulla justo, porta non rutrum nec, gravida non lectus. Integer sollicitudin, nunc sed egestas blandit, velit massa ultricies nisi, sed sagittis odio nisi ac tellus.</h3>
</div>

但不确定它对可访问性的潜在影响。但我认为，屏幕阅读器不应该关心文本方向。有人对这个问题有意见吗？谢谢。

将宽度应用于 :first-line

Apply width to :first-line

css

pseudo-element