How do I make it so text fills the entire height of a blockquote?

Asked Oct 08 '21 at 21:41

Active Oct 08 '21 at 21:46

Viewed 28 times

I am using the same design template for several webpages, which has a fixed height and width blockquote. The text inside will be different depending on the page it is on, with some being longer than others. So, is it possible that whatever text I place inside the blockquote, gets resized to perfectly fit within the block without having to do several media queries for each page?

The CSS I have for the blockquote:

blockquote {
  background-color : #c0303c;
  color            : #fff;
  margin           : 0;
  padding          : 0.5rem;
  text-align       : center;
  font-family      : 'Caudex', serif;
  height           : 315px;
  font-size        : 100%;
}

<blockquote>This is a blockquote.</blockquote>

edited Oct 08 '21 at 21:46

Hazel へいぜる

2,751
1
12
44

asked Oct 08 '21 at 21:41

u189zza

https://developer.mozilla.org/en-US/docs/Web/CSS/text-justify – Mister Jojo Oct 08 '21 at 21:46
@MisterJojo that could serve to be a *great* answer. – Hazel へいぜる Oct 08 '21 at 21:47
@Tacoタコス Not for me, having to cite the standard documentation is nothing glorious – Mister Jojo Oct 08 '21 at 21:49
1

Unfortunately text-justify is not supported in Chrome and Safari. The only real cross-browser solution here is to wrap each word in a span tag and use flexbox. – Ben Sewards Oct 08 '21 at 21:52

How do I make it so text fills the entire height of a blockquote?

0 Answers0