In my explanatory bubble, I aim to include text within the explain-header div as a container for my explanations:
/*Explain Bubble*/
.explain-container {
position: relative;
overflow: hidden;
max-width: 70vw;
max-height: 50vh;
background-color: rgba(6, 0, 15, 0.4);
padding: 0;
font-size: 1.25em;
border-radius: 1rem;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
margin-left: auto;
margin-right: auto;
}
.explain-header {
padding: 1em 1em;
color: #e9e4f0;
}
#phrase {
font-family: "Open Sans Bold";
color: #ff9100;
}
#colon {
font-family: "Open Sans Regular";
color: #ff0033;
}
#en-definition{
font-family: "Open Sans Light";
color: #f0ede9;
}
html{
overflow: hidden;
-webkit-user-select: none;
user-select: none;
}
body {
background-color: transparent;
overflow: hidden;
-webkit-text-stroke: 0px!important;
-webkit-font-smoothing: antialiased !important;
height: 100vh;
transform: translateZ(0);
backface-visibility: hidden;
margin: 0;
}<div class="explain-container">
<div class="explain-header">
<span id="phrase">make up</span>
<span id="colon">:</span>
<span id="en-definition">to prepare for sth</span>
<p>Nick made up a song about them.
When you’re the boss you can make up your own rules.
I’ve given talks so many times that now I just make them up as I go along (=think of things to say as I amNick made up a song about them.
When you’re the boss you can make up your own rules.
I’ve given talks so many times that now I just make them up as I go along (=think of things to say as I amNick made up a song about them.
When you’re the boss you can make up your own rules.
I’ve given talks so many times that now I just make them up as I go along (=think of things to say as I amNick made up a song about them.
When you’re the boss you can make up your own rules.
I’ve given talks so many times that now I just make them up as I go along (=think of things to say as I am
Nick made up a song about them.
When you’re the boss you can make up your own rules.
I’ve given talks so many times that now I just make them up as I go along (=think of things to say as I am
Nick made up a song about them.
When you’re the boss you can make up your own rules.
I’ve given talks so many times that now I just make them up as I go along (=think of things to say as I am
Nick made up a song about them.
When you’re the boss you can make up your own rules.
I’ve given talks so many times that now I just make them up as I go along (=think of things to say as I am THIS IS THE LAST LINE WHICH SHOULD BE VISIBLE
</p>
</div>
</div>Whenever the explanations get lengthy, they tend to overflow the container and become difficult for users to read in full.
How do we ensure all explanations fit within the container? Could reducing the font size or expanding the container's height be potential solutions?