Styjun

strong texti am getting data from my database into the inside of a paragraph tag it is inside a border box but when the data comes from the database it comes as a straightline and the lines do not break.
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>

you can see there the description going out of bounds when it is called from the database.
and the css code

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;