CSS vazamento de texto na div

[WilliamNascimento]

meu texto fica vazando da minha div , eu queria que ele quebrasse , alguem pode ajudar ?

<section class = "hobbies"><!-- inicio hobbie-->
			<h2 class = "tittlePets">Hobbies</h2>
				<nav class = "hobbie">
					<ul>

					<li class = "primeiro">
						<div class = "box-item">
							<div class = "img-hobbie">
								<span><i class="faz fa-futbol"></i></span>
							</div>
								<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
								</p>
					
						</div>
					</li>

					<li>
						<div class = "box-item">

						</div>
					</li>

					<li>
						<div class = "box-item">
						</div>
					</li>

					</ul>
				</nav>
		</section><!-- fim hobbie-->

	.hobbies{
	grid-area:hobbies;
	overflow: hidden;
	}
	.hobbie{
	grid-area:hobbies;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
	}
	.hobbie ul {
		display: flex;
	}
	.hobbie li {
		margin-left: 5px;
		display: flex;
	}
	.box-item{
  	font-family: nome;
  	font-size: 2.0em;
  	margin:5px 0px 30px 0px;
  	color:black;
  	border-radius: 10px;
  	height: 250px;
  	width: 220px;
  	background-color:#FFF;
  	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	}
	.img-hobbie{
		margin-top: 10px;
		display: flex;
		color:black;
		font-size: 2.2em;
		justify-content: center;
	}
	.text-hobbie{
		position: absolute;
	}

html e css 

[Visitante]

Boa noite! Já tentou usar o "word-break: break-all;" na tag p?

[WilliamNascimento]

 

7 minutos atrás, Dev Gabriel Souza disse:

Boa noite! Já tentou usar o "word-break: break-all;" na tag p?

AAA resolveu , eu havia posto na classe errada. E antes tinha tinha colocado normal que e o padrão  . Valeu mano .

[Visitante]

@WilliamNascimento

8 minutos atrás, WilliamNascimento disse:

Sim , pensando aqui nao seria pelo tamanho fixo de largura e altura ? Mas no caso a caixa precisa ter aquelas dimensoes

Bom, você também pode usar o overflow. Pelo tamanho da caixa e do texto (e da fonte) ele vai ultrapassar mesmo, não tem muito o que fazer.

.box-item{ 
	overflow: hidden;
	overflow-wrap: break-word;
}

 

@WilliamNascimento

11 minutos atrás, WilliamNascimento disse:

 

AAA resolveu , eu havia posto na classe errada. E antes tinha tinha colocado normal que e o padrão  . Valeu mano .

Opa, que bom que resolveu, William!