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>

第一行突出显示可以应用背景颜色，但遗憾的是不能显示宽度 如何将宽度应用于：第一行伪元素？

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

我最近创建了这个解决方案。我在接受答案的修改代码上显示它。如您所见，不需要:first-line selector或:before伪元素。百分比是针对右侧的差距。如果您使用过eg。 text-indent: 33.3%它会使第一行宽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>

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

Answer 3

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

用上面的css改变你的css

将宽度应用于：第一行

3 个答案: