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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

3149閲覧

チャット時のテキストエリアの文字折り返しの制御について

nagasa

総合スコア35

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/04/25 03:47

編集2017/04/25 10:53

今、チャットのプログラムを作っています。
チャットのメッセージを「ユーザー名:メッセージ内容」という形で表示させています。ユーザー名は半角で15文字以内で
入力してもらい、15文字未満は空白を入れて、すべてのユーザー名を15文字に合わせて、メッセージ部分の開始位置を
揃えています。

現在チャットの内容が表示されるテキストエリアが、メッセージが長くて、横幅いっぱいに文字が表示されると、
改行されて、テキストエリアの左端に文字が表示されます。

現状:

ユーザーA:今日は晴れ。今日は晴れ。今日は
晴れ。(←ここで改行されて表示)
ユーザーB:こちらは曇り。こちちは曇り。こ
ちらは曇り。

しかし、見やすくする為にテキストエリアで折り返した文字の先頭を上の文章の頭と合わせたいと考えています。

目標:

ユーザーA:今日は晴れ。今日は晴れ。今日は
→→→→→→晴れ。(←改行された文字の先頭を上のメッセージ部分と合わせる。)

ユーザーB:こちらは曇り。こちちは曇り。こ
→→→→→→ちらは曇り。

上記のような方法の実現方法がわからず、良い方法をご教授お願いしたく
よろしくお願いします。

(追記)
ご回答ありがとうございます。自分の浅学で恐縮ですが、テキストエリアに
指摘された内容をどう反映すればいいのか手間取っています。コードの一部を追記します。
テキストエリアの部分にindentを反映させてみましたが、うまくいかず、<tb><span>

<textarea>に組み合わせするとしたら、textareaを2つに分割して表示するということになるのでしょうか。 できれば、一つの<textarea>でやりたいと思っています。CSSに関しては、この部分は ```ここに言語を入力 <script> function sendMessage() { connection._session.publish(area, [myName, document.getElementById('msg').value], null, { exclude_me: false }); var msg = document.getElementById('msg'); msg.value = ''; msg.focus(); return false; } function writeMessage(arg) { var person = arg[0]; var message = arg[1]; var chatarea = document.getElementById('chatarea'); chatarea.value = chatarea.value + '\n' + person + '> ' + message; if(!chatarea) return; chatarea.scrollTop = chatarea.scrollHeight; } </scrpt> <html> <form autocomplete="off" onsubmit="return sendMessage();"> <input type="text" id="msg" style="width:80%;"> <input type="submit" value="送信"> </form> <textarea id="chatarea" style="width:100%; line-height:25px; font-size:13pt;" rows="20" readonly></textarea>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/04/25 10:07

ご自身で書かれたコード(HTML/CSS/JavaScript)を質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
nagasa

2017/04/25 10:39

おっしゃる通りですね。コードも載せます。
kei344

2017/04/25 10:48 編集

スタイル指定についての質問なのであればCSSも提示ください。また、コードはあまり省略せずどういった流れを想定しているものかがわかるようにされたほうがよいです。今のままでは「sendMessage」関数はありませんし、「writeMessage」関数は実行されることがありません。
guest

回答4

0

一番投げやりな方法 (昔の方法)のようにブロックを分ける

<table> <tr> <th>ユーザーA: <td>今日は晴れ。今日は晴れ。今日は 晴れ。(←ここで改行されて表示) <tr> <th>ユーザーB: <td>こちらは曇り。こちちは曇り。こちらは曇り。 <table>

投稿2017/04/25 03:55

編集2017/04/26 00:20
ahodana

総合スコア77

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nagasa

2017/04/25 04:00

回答ありがとうございます。試してみます。ただ、テキストエリアの中にテーブルが表示されるみたいな感じ?でしょうか。チャットする毎にどんどんテーブルの行が追加される感じだと思いますが、確認します。
guest

0

ベストアンサー

textarea要素内の文字列はプレーンテキストなので本件を実装するスマートな方法はおそらくないと思います。
あえてやるのであれば、textareaに固定幅フォントを指定し、指定文字数で折り返し、継続行の行頭にユーザ名の文字数分の空白を入れてテキストを出力する事です。

ユーザーA:今日は晴れ。今日は晴れ。今日は 晴れ。 ユーザーB:こちらは曇り。こちちは曇り。こ ちらは曇り。

[ユーザーA:], [ユーザーB:] 共に半角11文字ですので、半角スペースを11回挿入すればよい事が機械的に判断できるでしょう。
ただし、textareaの幅は 100% で動的指定のようですので、textarea.clientWidth を使用して折り返しに必要な文字数をJavaScriptで検出させる必要があります。
window の resize 時にも同判定処理を入れる必要があるでしょう。
面倒な処理なので固定幅にしてしまうのも手です。

個人的には textarea で出力する仕様から、table要素やdiv要素を出力する仕様に変更した方がエレガントだと思います。

Re: nagasa さん

投稿2017/04/25 10:57

編集2017/04/25 11:06
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nagasa

2017/04/25 11:00

ありがとうございます。一旦、仕様を再検討します。回答ありがとうございました。
guest

0

html

1<div style="display:flex"> 2 <span style="flex:0 1 15em;">なまえ</span> 3 <span style="flex:1 1 auto;">ないよう ないよう ないよう ないよう ないよう ないよう ないよう ないよう ないよう ないよう </span> 4</div>

投稿2017/04/25 07:28

ku__ra__ge

総合スコア4524

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nagasa

2017/04/25 08:47

回答ありがとうございます。こういうやり方があるんですね。確認します。
guest

0

html記述にもよりますが、インデントを使う案です

.indent { padding-left:5em; /*左に5文字分の余白をつくる*/ text-indent:-5em; /*先頭行の5文字だけ戻す*/ }

上記スタイルを指定すると、折り返した2行目以降だけが5文字の左余白を持った表示になります

あ、これだとユーザー名が固定文字数の場合しかだめですね・・・

投稿2017/04/25 04:05

編集2017/04/25 04:08
takito

総合スコア3111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nagasa

2017/04/25 04:17

回答ありがとうございます。ユーザー名は15文字に固定しようと思いますので、試してみます。
nagasa

2017/04/25 04:36

padding-left:5em;は適用されて、文字全体が動くのですが、text-indent:-5em;の方が適用されず、動いてくれないです。もうちょっと確認してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問