textareaの文字をそのまま表示させたい

css
1body { /*  背景 */
2	background: linear-gradient(-135deg, #EEFFFF, #FFFFDD);
3}
4
5header {
6	background: linear-gradient(#05FBFF, #5D99FF);
7	border-radius: 10px;
8}
9
10h1 { /* タイトル文字 */
11	color: #0066FF;
12	font-style: italic;
13	font-family: Arial;
14	text-align: center;
15	text-shadow: 3px 3px 3px #999999; /* 横方向 縦方向 ぼかし 影の色 */
16}
17
18#mainform { /* index限定設定 */
19	width: 400px;
20	height: auto;
21	margin: 30px auto;
22	padding: 20px;
23	border: 1px solid #555;
24	background: linear-gradient(#05FBFF, #5D99FF);
25	border-radius: 10px;
26	box-shadow: 0px 0px 10px;
27}
28
29
30#registerUserform { /* ログイン画面*/
31	width: 400px;
32	height: auto;
33	margin: 30px auto;
34	padding: 20px;
35	border: 1px solid #555;
36	background: linear-gradient(#05FBFF, #5D99FF);
37	border-radius: 10px;
38	box-shadow: 0px 0px 10px;
39}
40
41.form-title { /* タイトル文字「ログイン画面」*/
42	color: #3300CC;
43	font-size: 25px;
44	font-weight: bold;
45	font-family: Arial;
46	text-shadow: 3px 3px 3px #999999;
47	text-align: center;
48}
49.title{
50	text-align: center;
51}
52
53.loginform { /* 文字「ユーザー名」、「パスワード」*/
54	font-size: 16px;
55	font-family: Arial;
56	font-weight: bold;
57	margin-left: 40px;
58	margin-bottom: 6px;
59	margin-top: 20px;
60}
61
62
63#namebar {  /* マイページのプロフィールバー */
64	border-radius: 10px;
65	box-shadow: 0px 0px 10px;
66	width: 40%;
67	float: left;
68	text-align : center ;
69}
70
71#tweetbar { /* マイページのつぶやき一覧バー */
72	background-color: #00ECFF;
73	border-radius: 10px;
74	box-shadow: 0px 0px 10px;
75	width: 58%;
76	float: right;
77}
78
79.Login_button {
80	background-color: #3399FF;
81	color: #fff;
82	font-size: 14px;
83	margin-left: 132px;
84	margin-top: 30px;
85	border-radius: 10px;
86	cursor: pointer;
87	padding: 8px 40px;
88	transition: background-color 0.1s linear;
89}
90
91.Logout_button {
92	background-color: #0000CD;
93	color: #fff;
94	font-size: 13px;
95	border-radius: 10px;
96	cursor: pointer;
97	padding: 8px 13px;
98	transition: background-color 0.1s linear;
99	text-decoration: none; /* リンク用下線を消去 */
100}
101
102
103
104p.name { /* マイページのユーザー名 */
105	color: black;
106	font-size: 40px;
107	font-style: italic;
108	font-family: Arial;
109	margin-top: 12px;
110	text-align: center;
111	text-shadow: 3px 3px 3px #999999; /* 横方向 縦方向 ぼかし 影の色 */
112}
113
114.tweetform{   /* つぶやきフォーム */
115	padding: 4px;
116	font-size: 16px;
117}
118
119/*input[type="text"], input[type="password"] */
120.userform, .passform{
121	width: 300px;
122	padding: 4px;
123	font-size: 16px;
124	margin-left: 40px;
125	margin-bottom: 12px;
126}
127
128
129.tweet_button {
130background-color: #3399FF;
131	color: #fff;
132	font-size: 14px;
133	margin-top: 30px;
134	border-radius: 10px;
135	cursor: pointer;
136	padding: 8px 40px;
137	transition: background-color 0.1s linear;
138	text-decoration: none;
139
140}
141
142
143
144.koshin{
145	background-color: #3399FF;
146	color: #fff;
147	font-size: 14px;
148	margin-right: 12px;
149	border-radius: 10px;
150	cursor: pointer;
151	padding: 6px 8px;
152	transition: background-color 0.1s linear;
153	text-decoration: none;
154
155}
156
157
158.Login_button:hover, .Logout_button:hover, .tweet_button:hover {
159	/* マウスポインターが乗った時 */
160	background-color: #99FFFF;
161}
162
163#Result { /* ログイン結果画面 */
164	text-align: center;
165}
166
167p.tweet {   /* ツイートの文字 */
168	color: black;
169	font-size: 20px;
170	font-style: italic;
171	font-family: Arial;
172}
173
174

java
1<!-- メイン画面を出力する -->
2<%@ page language="java" contentType="text/html; charset=UTF-8"
3	pageEncoding="UTF-8"%>
4<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
5<!DOCTYPE html>
6<html>
7<head>
8<meta charset="UTF-8">
9<title>どこつぶ</title>
10<link rel="stylesheet" type="text/css"
11	href="${pageContext.request.contextPath}/css/style.css">
12</head>
13<body>
14	<header>
15		<h1>どこつぶ</h1>
16	</header>
17	<div id="namebar">
18		<p class="name">
19			<a href="${pageContext.request.contextPath}/Main" class=koshin>更新</a>
20			<c:out value="${loginUser.userName}" />
21			<a href="${pageContext.request.contextPath}/Logout" class="Logout_button">ログアウト</a>
22		<form action="${pageContext.request.contextPath}/Main" method="post">
23		<textarea name="text" rows="10" cols="30"  class="tweetform" placeholder="つぶやく内容を入力してください。"></textarea>
24			<br>
25			<input type="submit" value="つぶやく" class="tweet_button">
26		</form>
27		<c:if test="${not empty errorMsg}">
28			<p>${errorMsg}</p>
29		</c:if>
30	</div>
31	<div id="tweetbar">
32		<c:forEach var="mutter" items="${mutterList}">
33			<p class="tweet">
34				<c:out value="${mutter.userName}" />
35				:
36				<c:out value="${mutter.text}" />
37			</p>
38		</c:forEach>
39	</div>
40</body>
41</html>

教えてください！！

textareaで改行した文字を

でそのまま表示させたいのですがどうすればよいでしょうか？？

今のままだと
改行して入れた文が

１行でダラダラと表示されます

行動規範の内容に同意します

回答2件

ベストアンサー

一番簡単なのは出力の前後を <pre> タグで囲むことですかね。

HTML
1<pre>
2  <c:out value="{mutter.txt"} />
3</pre>

※Tomcat を質問のタグに追加したほうが良いような

投稿2017/05/17 07:37

編集2017/05/17 07:40

tacsheaven

総合スコア13703

Yoshi--

2017/05/17 08:04

ありがとうございました。解決しました！

行動規範の内容に同意します

暫く書いてないのでコードが正しいかあまり自信が無いですが
replace を使って、\nなどの改行コードを <br>に変換して出力する手法が良いと思います。

たしかreplaceに直接改行コードを書くとエラーを吐くので、変数にセットしてから代入したほうが良いかも。

JAVA
1<%@ pageContext.setAttribute("breakLine", "\n"); %>
2${fn:replace(${mutter.text}, breakLine, '<br>')}

投稿2017/05/17 08:25

iss

総合スコア506

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

textareaの文字をそのまま表示させたい

関連した質問