0

如何使块引用行的高度与元素内的文本完全相同。

这是它应该是什么样子的示例：

在此处输入图像描述

这是我从我创建的代码中得到的当前结果：

blockquote {
  margin: 20px 0 30px;
  padding-left: 20px;
  border-left: 5px solid #1371b8;
}
<blockquote>Test</blockquote>

从结果中，我们可以看到线条垂直大于文本。

4

4 回答 4

5

注意：inline-flex 不支持旧浏览器：http
://caniuse.com/#feat=flexbox但它确实有效......

  • 在块引用内添加了一个跨度以最佳定位它；请记住，当您更改字体或字体大小时，您必须重做此操作！

blockquote {
  font-size: 50px;
  text-transform:uppercase;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 5px solid #66e4b4;
  display:inline-flex;
} 

blockquote span {
  margin-top:-10px;
  margin-bottom:-10px;
}
  <blockquote ><span>windows to the universe</span></blockquote>

– 此答案基于عارف بن الأزرق的原始代码片段（见下文）

于 2017-08-31T13:33:41.517 回答
0

您可以使用行高。像这样的东西：

<style> 
.header blockquote {
margin: 20px 0 30px;
padding-left: 20px;
border-left: 5px solid #1371b8;
line-height: 25px;
}
</style>

<div class="header">
<blockquote><h1>WINDOWS TO <br />
THE UNIVERSE</h1></blockquote>
</div>
于 2017-08-31T11:13:00.100 回答
0

这是块引用行高问题的解决方案。只需制作 blockquote:before 并向左添加边框并使用绝对位置进行调整。你已经完成了。:) 

blockquote{    
    font-size: 35px;
    line-height: 52px;
    margin: 28px 0;
    overflow: hidden;
    padding: 0 0 0 26px;    
    font-weight: 100;
    color: #CC6B39;    
    position: relative;
}
blockquote:before {
    content: "";
    border-left: 6px solid #39348F;
    position: absolute;
    bottom: 14px;
    top: 13px;
    left: 0;
}
<blockquote>“Lorem Ipsum is simply dummy text of the 
printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy 
text ever since the 1500,”&lt;/blockquote>

于 2018-07-10T06:50:36.490 回答
-1

试试看

blockquote {
  font-size: 50px;
  text-transform:uppercase;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 5px solid #66e4b4;
} 
  <blockquote >windows to the universe</blockquote>

于 2017-08-31T11:05:00.830 回答