2016-10-05 12 views
0

こんにちは私はMySQLデータベースから段落のテキスト出力をスタイリングする際に問題があります。問題は、ユーザーが境界線から多くのテキストを入力し始めた場合です。私はどのようにそれが境界にとどまるようにそれをスタイルするのですか?PHPブートストラップ3テキストが領域外にありますか?

Off border

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

+0

サイトのURLを提供できますか?不完全なスニペットをデバッグできません –

+0

特定の幅を与えてからオーバーフローを設定してください: –

+0

@AbhishekPandeyコード全体をアップロードしました。 – user6860260

答えて

1

この意志はyou'r問題を解決し

p{ 
    word-wrap: break-word; 
} 

はフィドルhere

+0

ありがとうございました。それを調べてみました:) – user6860260

1
.caption{ 
    word-wrap: break-word;  
} 
を参照してくださいコードの下に追加
+0

本当にありがとう! – user6860260