php - 来自数据库溢出 Bootstrap 容器的文本

Question

我正在尝试从数据库中获取文本，但它溢出了它的容器。我尝试在没有数据库信息的情况下在原始代码中放置大量 lorem ipsum，它工作正常。

这是当我直接从数据库中获取信息时发生的情况:

这是 html 文件中的原生 lorem ipsum:

这是我的 html 代码:

            <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   } ?>

这是我保存此信息的表格:

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

这是我处理该表单的 php 文件:

    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;
}

我正在使用 bootstrap 4.1

Answer 1

你只需要一个空间，一切都会好起来的。

但是如果你的文本看起来像你获取的那样。您可以尝试使用以下 css 和文本的父 div:

word-break: break-all;