删除第一行的行高

Łuk*_*zko 5 html css dom

我创建了一些通过“对齐选项”对齐的文本,我想添加文本前导,但第一行文本必须保持在 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
}
Run Code Online (Sandbox Code Playgroud)

我想删除标有红色的空格

编辑:解决方案必须是跨浏览器的,

p:first-line { DOESNT WORK IN MOZILLA FIREROX
    line-height:100% !important;
}
Run Code Online (Sandbox Code Playgroud)

小智 6

我在你链接的 jsfiddle 中做了一些工作,我发现执行以下操作是有效的。

p:first-line {
    line-height:100% !important;
}
Run Code Online (Sandbox Code Playgroud)

希望我的回答对您的问题有所帮助!祝你有美好的一天。


G-C*_*Cyr 0

您还可以使用垂直负边距等于行高的伪元素来模拟行高: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 */
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

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