1

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

  1. Como eu poderia fazer com que a div mantenha o tamanho original independente do tamanho do texto?
  2. É possível criar um scroll na div, caso o texto seja muito grande ou tenha muitas linhas?

2 Respostas 2

3

Elementos DIV não tem tamanho original, a não ser o tamanho que acompanha o conteúdo ou o tamanho que você definir via css com a propriedade height:

Como eu poderia fazer com que a div mantenha o tamanho original independente do tamanho do texto?

O que você pode fazer é fixar o tamanho da DIV, usando o proprio height, como você nomeou a classe .square presumo que queira ela como um quadrado, então ficaria assim o CSS:

.square {   
    border: solid 5px #f0f;
    width: 50%;
    height: 50%;
    padding-bottom:30%;
    margin: 0 auto;
}

No entanto o padding-bottom:30%; será somando ao height:, então para contornar isto use o box-sizing: border-box;, assim:

.square {   
    border: solid 5px #f0f;
    width: 50%;
    height: 50%;
    padding-bottom:30%;
    margin: 0 auto;
    box-sizing: border-box;
}

É possível criar um scroll na div, caso o texto seja muito grande ou tenha muitas linhas?

Basta usar overflow: auto que irá aplicar o scroll tanto horizontal quanto vertical se necessário, se desejar somente o scroll vertical overflow-y: auto, ou se necessitar horizontal overflow-x: auto, no seu caso creio que você só queira vertical:

.square {   
    border: solid 5px #f0f;
    width: 50%;
    height: 50%;
    padding-bottom:30%;
    margin: 0 auto;
    overflow-y: auto;
    box-sizing: border-box;
}

Nota: dependendo do DOCTYPE dentro do seletor html, body terá que adicionar o height: 100%, assim:

html, body {
    background-color: #323232;
    height: 100%;
}

Resultado:

html, body {
    background-color: #323232;
    height: 100%;
}

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: 50%;
    padding-bottom:30%;
    margin: 0 auto;
    overflow-y: auto;
    box-sizing: border-box;
}

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


Extra

Claro que width: 50%; e height: 50%; no square vão depender do view-port, ou seja é possivel que não fique um quadrado, se deseja um quadrado perfeito terá que ou fixar a largura e altura com valores em pixels, ou usar JavaScript para atualizar o valor da altura conforme o da largura (ou vice-versa)

0

Opa, eu estou tendo o mesmo problema, no caso meus divs eles estão organizados em flexbox, eu apliquei o overflow auto e deixei shrink e grow 0 e fiz flex- basis específico para cada elemento, como faço para não ter o mesmo problema

Css

#container {
    background-color: antiquewhite;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex: 0 0;
    justify-content: space-evenly;
    height: 70Vh;
    width: 70vw; 
    margin: 0 15% 0 15%;
    box-shadow: 2px 10px 10px 10px #535050;
}

.item {
    text-align: left;
    white-space: normal;
    overflow: auto;

}

.item1 {
    flex-basis: 50%;
    background-color: yellow;
}

.item2 {
    flex-basis: 50%;
    background-color: green;
}

.item3 {
    flex-basis: 100%;
    background-color: blue;
}

Html

<section id="container">
            <div class="item item1">DescriptiveOccaecat enim Lorem ut labore et deserunt labore eu quis minim consequat. Esse exercitation occaecat aliquip elit. Pariatur labore do ut non commodo cupidatat reprehenderit officia veniam. DescriptiveOccaecat enim Lorem ut labore et deserunt labore eu quis minim consequat. Esse exercitation occaecat aliquip elit. Pariatur labore do ut non commodo cupidatat reprehenderit officia veniam. DescriptiveOccaecat enim Lorem ut labore et deserunt labore eu quis minim consequat. Esse exercitation occaecat aliquip elit. Pariatur labore do ut non commodo cupidatat reprehenderit officia veniam.</div>
            <div class="item item2">2</div>
            <div class="item item3">3</div>
        </section>
2
  • Amigo, se tens uma pergunta diferente, poste outra pergunta - e referencie essa aqui, se achares que há alguma relação útil. Na seção de respostas, poste apenas as soluções. Aqui não é um fórum de discussões... 14/04/2022 às 13:44
  • desculpa, eu sou novo por aqui. Achei que fosse melhor continuar o tópico por ser algo "semelhante". Farei isso 14/04/2022 às 13:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .