来自数据库溢出引导容器的文本

时间:2018-05-21 05:43:13

标签: php html css mysql twitter-bootstrap

我试图从数据库中获取文本,但它溢出了它的容器。我尝试在没有数据库信息的原始代码中放入大量的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

1 个答案:

答案 0 :(得分:0)

你只需要一个空间,一切都会好的。

但是如果你的文字看起来像你拿到的那样。您只需使用父div文本尝试以下css

word-break: break-all;