从第一行删除行高

Question

我创建了一些由＆＃34;对齐选项＆＃34;对齐的文本，我希望添加文本前导但第一行文本必须保留在x：0px y：0px。

有人知道从

标签的第一行删除行高吗？

https://jsfiddle.net/79f9rcgs/

body {
    margin:0;   
    padding:0;
}
.test {
    font-family:"verdana";
    font-size:25px;
    line-height:150px;
    background:yellow;
}
p::first-line {
    //line-height:0 !important; //doesn't work
}

编辑： 解决方案必须是CROSS-BROWSER，

p:first-line { DOESNT WORK IN MOZILLA FIREROX
    line-height:100% !important;
}

Answer 1

您可以应用负边距来移动整个内容。

body {
	margin:0;	
	padding:0;
}
.test {
	font-family:"verdana";
	font-size:25px;
	line-height:150px;
	background:yellow;
	margin-top:-60px;
}
p::first-line {
	
}

<p class="test" align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare odio metus, ut volutpat turpis mollis id. Aliquam sed risus congue, pulvinar erat a, fringilla ipsum. Duis posuere facilisis mauris vel fringilla. Etiam vel urna pharetra, vestibulum lectus eget, semper velit. Morbi eget nibh fringilla, hendrerit sem sollicitudin, aliquam enim. Quisque pulvinar felis vel lacinia cursus. Sed ullamcorper nisi nec sapien aliquet, et consequat nibh ultricies. Nullam et faucibus ante. Nam nec lectus varius, gravida purus et, faucibus justo. 
</p>

Answer 2

我在你链接的jsfiddle中工作了一点，我发现做了以下工作。

p:first-line {
    line-height:100% !important;
}

我希望我的回答可以帮助您解决问题！祝你有美好的一天。

Answer 3

您也可以使用垂直负边距等于行高的伪元素来模拟行高：0;在第一行。它会向上拉内容：

body {
  margin: 0;
  padding: 0;
}
.test {
  font-family: "verdana";
  font-size: 25px;
  line-height: 150px;
  background: yellow;
}
p:before {
  content: '';
  display: block;
  margin: -3em 0;/* 25px = 1em/font-size  150/25 = 6 . margin-top/bottom -3em = 6em */
}

<p class="test" align="justify">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare odio metus, ut volutpat turpis mollis id. Aliquam sed risus congue, pulvinar erat a, fringilla ipsum. Duis posuere facilisis mauris vel fringilla. Etiam vel urna pharetra, vestibulum
  lectus eget, semper velit. Morbi eget nibh fringilla, hendrerit sem sollicitudin, aliquam enim. Quisque pulvinar felis vel lacinia cursus. Sed ullamcorper nisi nec sapien aliquet, et consequat nibh ultricies. Nullam et faucibus ante. Nam nec lectus
  varius, gravida purus et, faucibus justo.
</p>

https://jsfiddle.net/79f9rcgs/22/

Answer 4

您可以使用P标记包装每个段落并使用first-child伪

检查此https://jsfiddle.net/MrDahdoul/79f9rcgs/17/

body {
  margin: 0;
  padding: 0;
  font-family: "verdana";
  font-size: 25px;
  background: yellow;
  text-align: justify;
}

#wrap p.test {
  line-height: 150px;
}

#wrap p.test:first-child {
  line-height: normal;
}




<div id="wrap">
  <p class="test">
    Lorem ipsum dolor sit amet, consectetur adipiscing
  </p>
  <p class="test">
    Lorem ipsum dolor sit amet, consectetur adipiscing
  </p>
  <p class="test">
    Lorem ipsum dolor sit amet, consectetur adipiscing
  </p>
  <p class="test">
    Lorem ipsum dolor sit amet, consectetur adipiscing
  </p>
</div>