I have this problem in css and I can not solve it, when the text gets too big, I can not make this line break, I can not use it, does anyone have any ideas?
* {
font-family: arial;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box-chat {
clear: both;
position: absolute;
height: calc(100% - 55px);
width: 100%;
left: 0;
top: 0;
border: solid 4px transparent;
margin-top: 55px;
}
.balao {
float: left;
clear: both;
background: #2f8633;
text-align: left;
border-radius: 3px;
margin-bottom: 5px;
color: #fff;
width: auto;
border: 5px solid transparent;
}
.balao h1 {
font-size: 18px;
}
.balao p {
font-size: 15px;
}
.form-mins-chat {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
right: 0;
background: #2f8633;
padding: 10px;
}
.form-mins-chat button {
font-size: 18px;
border: none;
background: #4caf50;
border-radius: 50%;
border-top: 2px solid transparent;
height: 35px;
text-align: center;
width: 35px;
color: #fff;
cursor: pointer;
}
.form-mins-chat input[type=text] {
border-radius: 5px;
width: calc(100% - 45px);
border: none;
margin-right: 5px;
padding: 5px;
height: 32px;
}
<div class="box-chat" id="pagina">
<!--<?php $result = mysqli_query($conexao,"SELECT user, msg, id FROM chat"); ?>
<?php while($row = mysqli_fetch_array($result)) : ?>-->
<div class="balao">
<h1>
nome do usuario
<!--<?= $row['user']; ?>-->
</h1>
<p>
mensagem
<!--<?= $row['msg']; ?>-->
</p>
</div>
<!--<?php endwhile; ?>-->
</div>
<form class="form-mins-chat" name='singup' method="post" action="chatdb.php">
<input type="hidden" name="user" value="<?php echo $_SESSION['email'];?>">
<input type="text" name="msg">
<button type="submit" value="deletar"><span class="ion-android-send">></span></button>
</form>