段落标记内的结果集,且行未中断

时间:2019-03-23 17:22:07

标签: html css jsp jdbc resultset

强文本,我正在将数据库中的数据获取到段落标签的内部,该文本位于边框中,但是当数据来自数据库时,它是一条直线,而线条却没有打破。 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;
}

0 个答案:

没有答案
相关问题