Блог

Главная - Вопросы по программированию - Область отключения текста PHP Bootstrap 3?

Область отключения текста PHP Bootstrap 3?

#php #html #css #twitter-bootstrap

#php #HTML #css #twitter-bootstrap

Вопрос:

Здравствуйте, у меня проблема, когда дело доходит до оформления текста абзаца, выводимого из базы данных 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>

Комментарии:

1. Можете ли вы указать URL своего сайта, мы не можем отладить ваш неполный фрагмент

2. Дайте ему определенную ширину, затем установите переполнение: скрытый

3. @AbhishekPandey Я загрузил весь код.

4. фрагмент ur мы не получаем правильную проблему. может быть «позиция: относительная» для «class =’col-sm-6 col-md-4» будет работать

Ответ №1:

добавьте ниже код, который решит вашу проблему

 p{
    word-wrap: break-word;
}

смотрите скрипку здесь

Ответ №2:

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