簡體   English   中英

PHP Bootstrap 3文本關閉區域?

[英]PHP Bootstrap 3 text off area?

您好,關於樣式化MySQL數據庫輸出的段落文本時,我遇到了一個問題。 問題是,如果用戶開始輸入大量文本,它將超出邊框。 我該如何設計樣式以便它留在邊界中。

越界

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <?php session_start(); include_once 'asset/database.php'; if (!isset($_SESSION['login'])) { header("Location: index.php"); } $query = $dbConnect->query("SELECT * FROM login WHERE id=".$_SESSION['login']); $userRow=$query->fetch_array(); ?> <?php $msg = ""; if (isset($_POST['upload'])) { header('Location: photowall.php'); //path $target= "images/wall/".basename($_FILES['image']['name']); $image = $_FILES['image']['name']; $header = $_POST['header']; $description = $_POST['description']; $sql = "INSERT INTO photowall (image, header, description) VALUES ('$image', '$header', '$description' )" ; mysqli_query($dbConnect, $sql); if(move_uploaded_file($_FILES['image']['tmp_name'], $target)){ }else { $msg = "Error upload failed!"; } } ?> <!DOCTYPE html> <html> <head> <title>Skatec- PhotoWall</title> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/syle.css" rel="stylesheet" media="screen"> </head> <body> <form method="post" action="photowall.php" enctype="multipart/form-data"> <input type = "hidden" name = "size" value = "1000000"> <div class = "form-group"> <label for="image">Image:</label> <input type="file" class="btn btn-default btn-file" name="image"> </div> <div class = "form-group"> <label for="image">Image Header:</label> <input type="text" name="header" class="form-control" id = "header" placeholder="Title of the image."> </div> <div class="form-group"> <label for="description">Description:</label> <textarea class="form-control" name = "description" rows="5" id="description" placeholder="Description of the image."></textarea> </div> <div class="form-group"> <input type="submit" name="upload" value="Upload" class="btn btn-default"> <a href="menu.php" class="btn btn-danger">Back</a> </div> </form> <div class = "container"> <?php $sql = "SELECT * FROM photowall"; $result = mysqli_query($dbConnect , $sql); while ($row = mysqli_fetch_array($result)) { echo "<div class='col-sm-6 col-md-4'>"; echo " <div class='thumbnail'>"; echo "<img src='images/wall/".$row['image']."' >"; echo "<div class='caption'>"; echo "<h3 class = 'text-center'>".$row['header']."</h3>"; echo "<p> </p>"; echo "<p class = 'text-center'>".$row['description']."</p>"; echo "</div>"; echo "</div>"; echo "</div>"; } $dbConnect->close(); ?> </div> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>kasdfopsafopasfjopasfjpoasfopjasfjopsafojpsfaopjsafopjasfopjasfojpsafojpasfojpsfaojpasfjopasfjopsafopjasfopjasfopjasfjopasfopjfasjopasfoapfjspojafsjopafsopjasfjopafs</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div> </body> </html> 

添加以下代碼,這將解決您的問題

p{
    word-wrap: break-word;
}

在這里看小提琴

.caption{
    word-wrap: break-word;     
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM