Text from database overflow bootstrap container - php

Question

I'm trying to get a text from the database but it overflows it's container. I tried putting a lot of lorem ipsum in the original code without the database info and it works fine.
This is what happen when I get the info directly from the database:
And this is a native lorem ipsum in the html file:
This is my html code:
<div class="col-md-8">
<div class="row">
<?php
$query = $mysqli->query("SELECT id,title,preview,author,timepost FROM news ORDER BY timepost DESC LIMIT 3");
$i = 1;
while($array = $query->fetch_array())
{
$date = DateTime::createFromFormat("Y-m-d H:i:s",$array['timepost']); ?>
<div class="col-md-12 mb-3" style="cursor: default;" id="<?php echo 'newsJunebia' . $i; $i++; ?>">
<div class="row">
<div class="col-md-12 bg-negro text-white rounded-top">
<strong><?= $array['title']; ?></strong>
</div>
</div>
<div class="row">
<div class="col-md-8 bg-negro-opacity text-naranja">
<small><em>Publicado el <?=$date->format('d');?> de <?= $date->format('F') ?>o del <?= $date->format('Y'); ?> a las <?= $date->format('H:i') ?></em></small>
</div>
<div class="col-md-4 bg-negro-opacity text-naranja d-flex flex-row-reverse">
<small><em>Autor: <?= $array['author']; ?></em></small>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-negro-opacity text-white">
<p><?php echo $array['preview']; ?></p>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-negro-opacity text-naranja rounded-bottom text-center">
<span style="cursor: pointer;" class="font-weight-bold font-italic text-naranja plusNews">Ver la noticia completa</span>
</div>
</div>
</div>
<?php } ?>
This is the form from where I save this info:
<div class="row">
<div class="col-md-12 mt-4">
<div class="card">
<div class="card-header bg-negro text-white">
<h5 class="card-title text-center">Agregar noticia</h5>
</div>
<form class="form" role="form" method="POST" id="form-news">
<input type="hidden" name="dblanguage" value="es_LA">
<div class="card-body bg-gris text-naranja font-weight-bold">
<div class="form-group">
<label for="newsType">Categoría de la noticia</label>
<select class="custom-select" id="newsType" name="newsType" disabled>
<option>Noticia Junebia</option>
</select>
</div>
<div class="form-group">
<label for="newsTitle">Título de la noticia (<span id="maxCharTitle">60</span> caracteres restantes)</label>
<input type="text" name="newsTitle" id="newsTitle" class="form-control" maxlength="60">
</div>
<div class="form-group">
<label for="newsPreview">Texto de vista previa (<span id="maxChar">120</span> caracteres restantes)</label>
<textarea type="text" name="newsPreview" id="newsPreview" class="form-control" maxlength="100"></textarea>
</div>
<div class="form-group">
<label for="newsContent">Contenido de la noticia</label>
<textarea id="newsContent" name="newsContent" class="form-control"></textarea>
</div>
<input type="hidden" name="username" value="<?= $_SESSION['userName'] ?>">
</div>
<div class="container-fluid justify-content-center d-flex bg-gris">
<button type="submit" class="btn btn-naranja btn-lg mb-2" id="btnAgregar">Agregar</button>
</div>
</form>
</div>
</div>
This is my php file to handle that form:
require_once('../database.php');
if(!isBanned() && isAdmin())
{
if(isset($_POST['newsTitle']))
{
$newsTitle = $_POST['newsTitle'];
$newsPreview = $_POST['newsPreview'];
$newsContent = $_POST['newsContent'];
$newsAuthor = $_POST['username'];
$newsTime = date('Y-m-d H:i:s');
$stmt = $mysqli->prepare("INSERT INTO news(title,preview,content,author,timepost) VALUES(?,?,?,?,?)");
$stmt->bind_param('sssss',$newsTitle,$newsPreview,$newsContent,$newsAuthor,$newsTime);
$stmt->execute();
echo true;
}
else
{
echo false;
}
}
else
{
echo false;
}
I'm using bootstrap 4.1

Answer 1

You just need a space and everything will be fine.
But if your text is looks like as you fetch. You can just try the following css with parent div of text:
word-break: break-all;