垂直边框匹配可视文本块高度而不是框高度答案

【问题标题】：Vertical border matching visual text block height instead of box height垂直边框匹配可视文本块高度而不是框高度
【发布时间】：2022-09-23 00:45:33
【问题描述】：

有没有办法让边框高度总是可视文本块的高度（从第一行的大写高度到最后一行的下降）而不是父元素的物理高度？

正如您在此处看到的，左边界线始终突出在文本上方和下方。所以我们需要裁剪边框的那几个多余的像素以匹配文本的视觉块高度。我在下面尝试过，或者应该有另一种方法来做到这一点。由于文本在不同的屏幕尺寸上显示得更宽和更窄，它不应该是一个固定的高度。

我试图用 95% 的填充、边距、高度来裁剪边界线，但都不起作用。

.line-left-blue {
  border-left: 8px solid #007dc3;
  padding-left: 14px;
}

h2 {
  margin: 0px;
}

<div class=\"line-left-blue\">
  <h2>Maecenas nec odio et ante tincidunt tempus.</h2>
  <div>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</div>
</div>

标签： html css typography

【解决方案1】：

如果我正确理解您的问题 - 您希望 CSS 将行高从 cap height（大写字母的顶部）的顶部修剪到 descender 的底部（例如，小写字母 'p 上的尾部'）？

如果我的理解是正确的，那么答案是否定的。

CSS 工作组有一个关于类似问题的提案，您可以像 leading 在打印世界中一样控制行高，可以在这里看到：

CSS-inline leading control

这个问题有一个相关的“解决方案”，就让 CSS 行高像前导一样工作，在这篇 CSS 技巧文章中：

How to Tame Line Height in CSS

一些简单的解决方法

使用管道| 字符

这个角色（通常）尊重大写高度。

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

p {
  font-size: 3rem;
}

&lt;p&gt;&lt;span class="pipe"&gt;|&lt;/span&gt; T&lt;/p&gt;

使用空跨度元素

如果您有权访问 HTML，则可以在文本的开始标记内添加 <span> 元素，然后相应地设置它的样式。

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

p {
  position: relative;
  font-size: 3rem;
  display: inline-flex;
}

.border-effect {
  width: 2px;
  height: 2.1rem;
  background: red;
  position: absolute;
  left: -1rem;
  bottom: 0.7rem;
}

&lt;p&gt;&lt;span class="border-effect"&gt;&lt;/span&gt;T&lt;/p&gt;

使用伪元素

如果您无权访问 HTML，则可以使用 ::before 或 ::after 伪元素。

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

p {
  position: relative;
  font-size: 3rem;
  display: inline-flex;
}

p::before {
  content: "";
  width: 2px;
  height: 2.1rem;
  background: red;
  position: absolute;
  left: -1rem;
  bottom: 0.7rem;
}

&lt;p&gt;T&lt;/p&gt;

【讨论】：

谢谢您的回答。我的意思是文本旁边的垂直线。这个的高度（在这种情况下是用左边框创建的）总是填充到它所在的 div 的高度，因此总是在文本上方和下方突出几个像素。所以我正在寻找一种方法将线条修剪到文本的大写高度并低于下降器。
@T-Design 如果您只是在寻找左边框效果，我已经为答案添加了一些更简单的解决方法。
是的，这是可行的，尽管如果它需要显示在整段文本旁边，我将 .border-effect 高度更改为百分比而不是固定高度，这也具有预期的效果。
不用担心，很高兴能帮上忙。如果您认为它足以获得正确答案，请随时将其标记为正确:)

【解决方案2】：

我找到了一种解决方法来修剪一段文本旁边的垂直线。基本上使用单一彩色图像作为背景图像创建。然后用百分比设置高度以精确控制高度。例如，square.jpg 可以是单色 10x10 像素的图像。

<style>
        
.vertical-line {
background-image: url("square.jpg");
background-repeat: no-repeat;
background-size: 4px 90%;
background-position: left center;
}

.margin {
margin-left: 20px;
}

</style>

<div class="vertical-line">
<h3 class="margin"><strong>Header title</strong><br>
Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget 
condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem 
neque sed ipsum.</h3>
</div>

【讨论】：