набор результатов внутри тега абзаца и строки не ломаются - PullRequest
Новая
       14

набор результатов внутри тега абзаца и строки не ломаются

0 голосов
/ 23 марта 2019

строгий текст Я получаю данные из моей базы данных внутри тега абзаца, он находится внутри рамки, но когда данные поступают из базы данных, они поступают по прямой линии, и линии не разбиваются , you can see the sentence going out of the border of the box in this image

        <div class="events">

        <ul>

   <%
   String id = request.getParameter("userId");
   String driverName = "com.mysql.jdbc.Driver";
   String connectionUrl = "jdbc:mysql://localhost:3306/";
   String dbName = "javaproject";
   String userId = "root";
   String password = "root";

   try {
   Class.forName(driverName);
   } catch (ClassNotFoundException e) {
   e.printStackTrace();
   }

   Connection connection = null;
   Statement statement = null;
   ResultSet resultSet = null;

   try{ 
   connection = DriverManager.getConnection(connectionUrl+dbName, userId, 
   password);
   statement=connection.createStatement();
   String sql ="SELECT * FROM event";

   resultSet = statement.executeQuery(sql);
   while(resultSet.next()){
    %>
            <li>



             <div class="time" >
                <h2><%=resultSet.getString("day") %><br><span> 
                <%=resultSet.getString("month") %></span></h2>

             </div>
                 <div class="details" >
                    <h3><%=resultSet.getString("title") %></h3>
                    <p >

                    <%=resultSet.getString("description") %>

                    </p>

                    <a href="#">View Details</a>
                </div>

                <div style="clear: both;"></div>
    </li>


<% 
}

} catch (Exception e) {
  e.printStackTrace();
}
%>

        </ul>

    </div>

вы можете видеть, что описание выходит за границы при вызове из базы данных. и код CSS 

section .events ul li .time{
position: relative;
padding: 20px;
background: #262626;
box-sizing: border-box;
width: 30%;
height: 100%;
float: left;
text-align: center;
transition: .5s;
}
section .events ul li:hover .time{
background: #e91e63;
}
section .events ul li .time h2{
position: absolute;
margin: 0;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 60px;
line-height: 30px;

}
section .events ul li .time h2 span{
font-size: 30px;

}   
section .events ul li .details{
padding: 20px;
background: #fff;
box-sizing: border-box;
width: 70%;
height: 100%;
float: left;
}
section .events ul li .details h3{
position: relative;
margin: 0;
padding: 0;
font-size: 22px;

}
section .events ul li .details p{
position: relative;
margin: 10px 0 0;
padding: 0;
font-size: 16px;


}
section .events ul li .details a{
display: inline-block;
text-decoration: none;
text-transform: uppercase;
padding: 10px 15px;
border: 2px solid #262626;
margin-top: 15px;
font-size: 18px;
transition: .5s;

}
section .events ul li .details a:hover{
background: #e91e63;
color: #fff;
border-color: #e91e63;
}
...