[已解决]java web中页面显示文本问题

ZhihanXing · 发表于 2023-11-7 09:58:31

在java web开发中，在前端放置了一个textarea用来收集用户输入的大量文本。使用servlet获取这些文本后利用mybatis传输到mysql中，之后在另一个页面重新读取mysql中保存的这些文本并将其展示在页面中。但是文本中原本的换行无法正常显示，如果使用<pre>标签的话，每行文本又会因为过长而溢出用来存放文本的元素。即便设置CSS样式word-warp和word-break也无法显示原本就有的换行，应该如何操作？
获取文本的前端

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>写博客</title>
    <link rel="stylesheet" href="style/write.css"/>
    <script src="script/ad.js" async></script>
</head>
<body>
<jsp:include page="header.jsp"/>
<div class="box">
    <form action="/theBlog/writeServlet" method="get" autocomplete="off">
        标题：<input type="text" name="title"><br> 内容：
        <textarea name="text" id="" cols="30" rows="10"></textarea>
        <button type="submit">提交</button>
    </form>
</div>
<jsp:include page="ad.jsp"/>
<jsp:include page="footer.jsp"/>
</body>
</html>

展示文本的前端

<%@ page import="edu.zjku.service.BlogService" %>
<%@ page import="edu.zjku.service.BlogServiceImpl" %>
<%@ page import="java.util.List" %>
<%@ page import="edu.zjku.bean.Blog" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的博客主页</title>
    <link rel="stylesheet" href="style/public.css">
    <link rel="stylesheet" href="style/index.css">
    <script src="script/ad.js" async></script>
</head>
<body>
<jsp:include page="header.jsp"/>
<jsp:include page="ad.jsp"/>
<div class="box">
    <%BlogService service = new BlogServiceImpl();%>
    <%List<Blog> blogs =service.selectAll();%>
    <%for(Blog blog:blogs){%>
    <table>
        <tr><td class="title"><%=blog.getTitle()%></td></tr>
        <tr><td class="text"><%=blog.getText()%></td></tr>
        <tr><td class="user"><%=blog.getUser()%></td></tr>
        <tr><td class="time"><%=blog.getTime()%></td></tr>
    </table>
    <%}%>
</div>
<jsp:include page="footer.jsp"/>
</body>
</html>

最佳答案

月排行榜 / 总排行榜

Mike_python小

2023-11-7 09:58:32

问题：在Java Web开发中，如何正确显示从数据库中读取的文本内容，保留原本的换行并避免溢出？

在Java Web开发中，如果从数据库中读取的文本内容需要在页面中正确显示，并保留原本的换行，可以尝试以下方法：

1. [b]使用CSS样式white-space: pre-wrap;：[/b]
在展示文本的页面中，可以为包裹文本的元素添加CSS样式white-space: pre-wrap;，这样可以保留原本的换行，并根据需要自动换行，避免溢出。

[/code]html
<style>
   .text-content {
         white-space: pre-wrap;
   }
</style>
[/code]

然后在展示文本的地方使用这个样式：
[/code]html
<div class="box">
   <% BlogService service = new BlogServiceImpl(); %>
   <% List<Blog> blogs = service.selectAll(); %>
   <% for (Blog blog : blogs) { %>
         <table>
            <tr><td class="title"><%= blog.getTitle() %></td></tr>
            <tr><td class="text-content"><%= blog.getText() %></td></tr>
            <tr><td class="user"><%= blog.getUser() %></td></tr>
            <tr><td class="time"><%= blog.getTime() %></td></tr>
         </table>
   <% } %>
</div>
[/code]

2. 使用JavaScript处理文本内容：
在前端页面展示文本时，可以使用JavaScript来处理文本内容，将换行符替换为<br>标签，这样可以确保文本按照换行正确显示。

[/code]javascript
function formatText(text) {
   return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
}
[/code]

然后在展示文本的地方调用这个JavaScript函数：
[/code]html
<tr><td class="text"><%= formatText(blog.getText()) %></td></tr>
[/code]

通过以上方法，你应该能够在页面中正确显示从数据库中读取的文本内容，并保留原本的换行。如果还有其他问题或者需要进一步解释，请随时提出。

球一个最佳答案谢谢啦！这对我非常重要！

跳转到最佳答案楼层

Mike_python小 · 发表于 2023-11-7 09:58:32

这个最佳答案由 Mike_python小给出，感谢 Mike_python小的回答。

单击隐藏图章

问题：在Java Web开发中，如何正确显示从数据库中读取的文本内容，保留原本的换行并避免溢出？

在Java Web开发中，如果从数据库中读取的文本内容需要在页面中正确显示，并保留原本的换行，可以尝试以下方法：

1. [b]使用CSS样式white-space: pre-wrap;：[/b]
在展示文本的页面中，可以为包裹文本的元素添加CSS样式white-space: pre-wrap;，这样可以保留原本的换行，并根据需要自动换行，避免溢出。

[/code]html
<style>
   .text-content {
         white-space: pre-wrap;
   }
</style>
[/code]

然后在展示文本的地方使用这个样式：
[/code]html
<div class="box">
   <% BlogService service = new BlogServiceImpl(); %>
   <% List<Blog> blogs = service.selectAll(); %>
   <% for (Blog blog : blogs) { %>
         <table>
            <tr><td class="title"><%= blog.getTitle() %></td></tr>
            <tr><td class="text-content"><%= blog.getText() %></td></tr>
            <tr><td class="user"><%= blog.getUser() %></td></tr>
            <tr><td class="time"><%= blog.getTime() %></td></tr>
         </table>
   <% } %>
</div>
[/code]

2. 使用JavaScript处理文本内容：
在前端页面展示文本时，可以使用JavaScript来处理文本内容，将换行符替换为<br>标签，这样可以确保文本按照换行正确显示。

[/code]javascript
function formatText(text) {
   return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
}
[/code]

然后在展示文本的地方调用这个JavaScript函数：
[/code]html
<tr><td class="text"><%= formatText(blog.getText()) %></td></tr>
[/code]

通过以上方法，你应该能够在页面中正确显示从数据库中读取的文本内容，并保留原本的换行。如果还有其他问题或者需要进一步解释，请随时提出。

球一个最佳答案谢谢啦！这对我非常重要！

isdkz · 发表于 2023-11-7 09:59:52

问题的关键在于文本中的换行无法正常显示。这是因为在HTML中，普通文本中的换行符（\n）会被解析为一个空格，而不会产生实际的换行效果。

解决这个问题的方法是将普通文本中的换行符替换为HTML中的换行标签（<br>）。在展示文本的前端代码中，将 <%=blog.getText()%> 修改为 <%=blog.getText().replace("\n", "<br>")%> 即可。

修改后的代码如下：

<%@ page import="edu.zjku.service.BlogService" %> <%@ page import="edu.zjku.service.BlogServiceImpl" %> <%@ page import="java.util.List" %> <%@ page import="edu.zjku.bean.Blog" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>我的博客主页</title> <link rel="stylesheet" href="style/public.css"> <link rel="stylesheet" href="style/index.css"> <script src="script/ad.js" async></script> </head> <body> <jsp:include page="header.jsp"/> <jsp:include page="ad.jsp"/> <div class="box"> <%BlogService service = new BlogServiceImpl();%> <%List<Blog> blogs =service.selectAll();%> <%for(Blog blog:blogs){%> <table> <tr><td class="title"><%=blog.getTitle()%></td></tr> <tr><td class="text"><%=blog.getText().replace("\n", "<br>")%></td></tr> <tr><td class="user"><%=blog.getUser()%></td></tr> <tr><td class="time"><%=blog.getTime()%></td></tr> </table> <%}%> </div> <jsp:include page="footer.jsp"/> </body> </html>

这样修改后，在展示文本时，原本的换行符会被替换为HTML的换行标签，从而实现正确的换行效果。

账号		自动登录	找回密码
密码			立即注册