设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Java交流 › java web中页面显示文本问题
返回列表 发新帖
查看: 948|回复: 2

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

[复制链接]
ZhihanXing
发表于 2023-11-7 09:58:31 | 显示全部楼层 |阅读模式
5鱼币
在java web开发中，在前端放置了一个textarea用来收集用户输入的大量文本。使用servlet获取这些文本后利用mybatis传输到mysql中，之后在另一个页面重新读取mysql中保存的这些文本并将其展示在页面中。但是文本中原本的换行无法正常显示，如果使用<pre>标签的话，每行文本又会因为过长而溢出用来存放文本的元素。即便设置CSS样式word-warp和word-break也无法显示原本就有的换行，应该如何操作？
获取文本的前端
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>写博客</title>
  5.     <link rel="stylesheet" href="style/write.css"/>
  6.     <script src="script/ad.js" async></script>
  7. </head>
  8. <body>
  9. <jsp:include page="header.jsp"/>
  10. <div class="box">
  11.     <form action="/theBlog/writeServlet" method="get" autocomplete="off">
  12.         标题：<input type="text" name="title"><br> 内容：
  13.         <textarea name="text" id="" cols="30" rows="10"></textarea>
  14.         <button type="submit">提交</button>
  15.     </form>
  16. </div>
  17. <jsp:include page="ad.jsp"/>
  18. <jsp:include page="footer.jsp"/>
  19. </body>
  20. </html>
复制代码

展示文本的前端
  1. <%@ page import="edu.zjku.service.BlogService" %>
  2. <%@ page import="edu.zjku.service.BlogServiceImpl" %>
  3. <%@ page import="java.util.List" %>
  4. <%@ page import="edu.zjku.bean.Blog" %>
  5. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  6. <html>
  7. <head>
  8.     <title>我的博客主页</title>
  9.     <link rel="stylesheet" href="style/public.css">
  10.     <link rel="stylesheet" href="style/index.css">
  11.     <script src="script/ad.js" async></script>
  12. </head>
  13. <body>
  14. <jsp:include page="header.jsp"/>
  15. <jsp:include page="ad.jsp"/>
  16. <div class="box">
  17.     <%BlogService service = new BlogServiceImpl();%>
  18.     <%List<Blog> blogs =service.selectAll();%>
  19.     <%for(Blog blog:blogs){%>
  20.     <table>
  21.         <tr><td class="title"><%=blog.getTitle()%></td></tr>
  22.         <tr><td class="text"><%=blog.getText()%></td></tr>
  23.         <tr><td class="user"><%=blog.getUser()%></td></tr>
  24.         <tr><td class="time"><%=blog.getTime()%></td></tr>
  25.     </table>
  26.     <%}%>
  27. </div>
  28. <jsp:include page="footer.jsp"/>
  29. </body>
  30. </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小

查看完整内容

问题：在Java Web开发中，如何正确显示从数据库中读取的文本内容，保留原本的换行并避免溢出？ 在Java Web开发中，如果从数据库中读取的文本内容需要在页面中正确显示，并保留原本的换行，可以尝试以下方法： 1. 使用CSS样式white-space: pre-wrap;： 在展示文本的页面中，可以为包裹文本的元素添加CSS样式white-space: pre-wrap;，这样可以保留原本的换行，并根据需要自动换行，避免溢出。 [/code]html .text ...
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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]

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

球一个最佳答案谢谢啦！这对我非常重要！
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

isdkz
发表于 2023-11-7 09:59:52 | 显示全部楼层
问题的关键在于文本中的换行无法正常显示。这是因为在HTML中，普通文本中的换行符（\n）会被解析为一个空格，而不会产生实际的换行效果。

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

修改后的代码如下：

  1. <%@ page import="edu.zjku.service.BlogService" %>
  2. <%@ page import="edu.zjku.service.BlogServiceImpl" %>
  3. <%@ page import="java.util.List" %>
  4. <%@ page import="edu.zjku.bean.Blog" %>
  5. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  6. <html>
  7. <head>
  8.     <title>我的博客主页</title>
  9.     <link rel="stylesheet" href="style/public.css">
  10.     <link rel="stylesheet" href="style/index.css">
  11.     <script src="script/ad.js" async></script>
  12. </head>
  13. <body>
  14. <jsp:include page="header.jsp"/>
  15. <jsp:include page="ad.jsp"/>
  16. <div class="box">
  17.     <%BlogService service = new BlogServiceImpl();%>
  18.     <%List<Blog> blogs =service.selectAll();%>
  19.     <%for(Blog blog:blogs){%>
  20.     <table>
  21.         <tr><td class="title"><%=blog.getTitle()%></td></tr>
  22.         <tr><td class="text"><%=blog.getText().replace("\n", "<br>")%></td></tr>
  23.         <tr><td class="user"><%=blog.getUser()%></td></tr>
  24.         <tr><td class="time"><%=blog.getTime()%></td></tr>
  25.     </table>
  26.     <%}%>
  27. </div>
  28. <jsp:include page="footer.jsp"/>
  29. </body>
  30. </html>
复制代码


这样修改后，在展示文本时，原本的换行符会被替换为HTML的换行标签，从而实现正确的换行效果。
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-3 14:21

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表