时间戳

首页 > 解决方案 > CSS如何获得带有工作的::first-line伪元素的内联显示

html - CSS如何获得带有工作的::first-line伪元素的内联显示

问题描述

这看起来很简单，但我无法让它工作，无论是组合float，inline-block等等。我试图在第一行获得更多空间，以便第二行不会与标题“冲突”。我知道这::first-line不适用于inline元素。我想保留这个布局（布局是重要的，而不是inline显示，所以任何工作都可以）。该解决方案应具有广泛的浏览器支持。

我的设计必须保持响应性，因此不应将文本切割成不同的部分。我可以在 javascript 中执行此操作并通过在 上运行脚本来保持响应resize，但我真的很想避免这种解决方案。

编辑： @TemaniAfif 关于设置inline-block标题的评论对我的特殊情况有用，但对于好奇和未来的读者来说，它并不直接回答伪元素。例如，如果有人想要大写或更改颜色，我觉得这个问题仍然有效，所以我正在编辑片段。

.heading {
  padding: 5px;
  background-color: blue;
  color: white;
}
.content {
  margin-left: 5px;
}
.content::first-line {
  line-height: 2;
  text-transform: uppercase;
  color: red;
}
.block {
  display: block;
}
<b>Display is fine, first-line doesn't work because of inline + margin left works fine:</b>
<br><br>

<span class="heading">header: </span>
<span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

<br><br>
<b>Display is out now that first-line works because of block (or inline-block) + margin left out too:</b>
<br><br>

<span class="heading">header: </span>
<span class="content block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

标签： htmlcsspseudo-element

解决方案

您并没有真正描述应该如何对齐，但是通过组合第一个单词float:left;的否定margin-top设置span（也与我在下面使用的值不同），您应该能够得到您想要的：

.heading {
  float:left;
  margin: -10px 0 0 0;
  padding: 5px;
  background-color: blue;
  color: white;
}
.content {
  margin-left: 5px;
}
<b>Display is fine, first-line doesn't work because of inline + margin left works fine:</b>
<br><br>

<span class="heading">header: </span>
<span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

推荐阅读