Possuo uma div
que representa um quadrado no qual tem o objetivo de exibir um texto para o usuário, veja:
html, body {
background-color: #323232;
}
html {
font-family: 'helvetica neue', 'arial', sans-serif;
font-size: 24px;
font-weight: bold;
padding-top: 5em;
-webkit-font-smoothing: antialiased;
text-align: center;
background: #323232;
}
.square {
border: solid 5px #f0f;
width: 50%;
height: 0%;
padding-bottom:30%;
margin: 0 auto;
}
.square p {
color: #fff;
font-size: 20px;
text-align: justify;
position: relative;
padding-left: 2%;
padding-right: 2%;
}
<div class="square">
<p>“The police are across the street.”</p>
<p>Cal stood in front of the bathroom mirror, face covered in white shaving cream and an orange razor in one hand. The room was full of warm steam from the long shower he’d taken, but after his wife’s statement he’d gone cold.´</p>
<p>She knocked on the door again. “Did you hear what I said?”</p>
<p>“At the Daniels’ house?”</p>
<p>“Yes,” she said, “and there are a lot of them.”</p>
<p>In other words, hurry up.</p>
<p>He thought of the black notebook he kept in the bottom drawer of his desk, the Journal of Dead Animals. Cal was trembling.</p>
</div>
No entanto, se o texto for muito grande, ele faz com que o tamanho da div
seja alterado. Sendo assim, eu gostaria de uma ajuda com as perguntas abaixo.
Perguntas
- Como eu poderia fazer com que a div mantenha o tamanho original independente do tamanho do texto?
- É possível criar um scroll na div, caso o texto seja muito grande ou tenha muitas linhas?