Блок цитаты левой границы такой же высоты, как текст

Question

Как сделать строку кавычек блока точно такой же высоты, как текст внутри элемента.

Вот пример того, как это должно выглядеть:

Это текущий результат, который я получаю из кода, который я создал:

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

<blockquote>Test</blockquote>

Из результата видно, что строка по вертикали больше текста.

Answer 1

ПРИМЕЧАНИЕ: inline-flex не поддерживает старые браузеры: http://caniuse.com/
Но это работает...

• Добавлен промежуток внутри цитаты, чтобы расположить его оптимально; Имейте в виду, вам придется повторить это при изменении шрифта или размера шрифта!

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>

- Этот ответ основан на оригинальном фрагменте кода (см. Ниже) от عارف بن الأزرق

Answer 2

Вот решение проблемы высоты строки цитаты. Просто сделайте цитату: перед и добавьте границу слева и отрегулируйте с абсолютным положением. ты сделал.:)

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,”</blockquote>

Answer 3

Вы можете использовать высоту строки. Что-то вроде этого:

<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>

Answer 4

Попробуй это

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>