teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

修正

2018/07/13 12:28

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -9,12 +9,13 @@
9
9
  「単なる文字列の連続」→「1単語」として解釈されます。
10
10
 
11
11
  例えばこんな感じ
12
+ ※適当に打ってるので画面表示上ちょっと変わってます。
12
13
  ```html
13
14
  <body style="width:100px;">
14
15
  <p>qwerty1234567890^\!"#$%&'()=~|asdfghjkl;:]zxcvbnm,./`+><?_*}{</p>
15
16
  </body>
16
17
  ```
17
- ![イメージ説明](214ad003cbbe2dd6eceb09fb075f131e.png)
18
+ ![イメージ説明](111edacf23c8dd9da12256afa173a100.png)
18
19
 
19
20
  概念的には1単語なので何もしなければ勝手に折り返しません。
20
21
  CSSなどで指定する方法はあります。

2

追記

2018/07/13 12:28

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -8,7 +8,64 @@
8
8
  html上はそういう単語とかどうとかいう概念はタグやscriptコード以外にはないので、
9
9
  「単なる文字列の連続」→「1単語」として解釈されます。
10
10
 
11
+ 例えばこんな感じ
12
+ ```html
13
+ <body style="width:100px;">
14
+ <p>qwerty1234567890^\!"#$%&'()=~|asdfghjkl;:]zxcvbnm,./`+><?_*}{</p>
15
+ </body>
16
+ ```
17
+ ![イメージ説明](214ad003cbbe2dd6eceb09fb075f131e.png)
18
+
11
19
  概念的には1単語なので何もしなければ勝手に折り返しません。
12
20
  CSSなどで指定する方法はあります。
13
21
  それも「よろしく折り返す」か「指定した幅で折り返す」かで指定の仕方も違ってきますので、
14
- その辺りは調べてみてください。
22
+ その辺りは調べてみてください。
23
+
24
+ # 追記(というか蛇足)
25
+
26
+ 蛇足なので参考まで。
27
+
28
+ ちなみに、検証がてら色々と試してみましたが、半角ハイフン[-]を入れると、英数字をつなぐ箇所に限り、
29
+ 英単語の折り返し連結と同じくそこで折り返します。(ある程度法則はあり)
30
+
31
+ 最初のほうに入れる
32
+ ```html
33
+ <body style="width:100px;">
34
+ <p>q-werty1234567890^\!"#$%&'()=~|asdfghjkl;:]zxcvbnm,./`+><?_*}{</p>
35
+ </body>
36
+ ```
37
+ ![イメージ説明](0d85ade48d50ec2b7bc7218d86f76b3f.png)
38
+
39
+ 英数字がある記号の前
40
+ ```html
41
+ <body style="width:100px;">
42
+ <p>qwerty1234567890-^\!"#$%&'()=~|asdfghjkl;:]zxcvbnm,./`+><?_*}{</p>
43
+ </body>
44
+ ```
45
+ ![イメージ説明](c1f2a810106de711276ac5ac4c3f34de.png)
46
+
47
+ 記号の中
48
+ ```html
49
+ <body style="width:100px;">
50
+ <p>qwerty1234567890^\!"#-$%&'()=~|asdfghjkl;:]zxcvbnm,./`+><?_*}{</p>
51
+ </body>
52
+ ```
53
+ ![イメージ説明](f9a7f8da595e5cbbea9efe75f1475d7c.png)
54
+
55
+ 途中の英数字の中
56
+ ```html
57
+ <body style="width:100px;">
58
+ <p>qwerty1234567890^\!"#$%&'()=~|asdfg-hjkl;:]zxcvbnm,./`+><?_*}{</p>
59
+ </body>
60
+ ```
61
+ ![イメージ説明](d16949a2ecc2d05947370568a90675b3.png)
62
+
63
+ 複数入れる
64
+ ```html
65
+ <body style="width:100px;">
66
+ <p>qwe-rty123-4567890^\!"#$%&'()=~|asdfg-hjkl;:]zxc-vbnm,./`+><?_*}{</p>
67
+ </body>
68
+ ```
69
+ ![イメージ説明](246f02d06f323461d8786c7120bb346a.png)
70
+
71
+ いずれにしても「これ全部で1単語」の意味となり、bodyに指定したwidthは無視されますね。

1

修正

2018/07/13 12:21

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -4,6 +4,11 @@
4
4
  そのため、1単語が短く解釈されて端っこで改行されています。
5
5
  (正確には行はかわっていなくて**「折り返し」**です)
6
6
 
7
- 実際の英文では-で「折り返しても同じ単語だよ」と表現しますが、
7
+ 実際の英文ではで「折り返しても同じ単語だよ」と表現しますが、
8
8
  html上はそういう単語とかどうとかいう概念はタグやscriptコード以外にはないので、
9
- 「単なる文字列の連続」→「1単語」として解釈されています。
9
+ 「単なる文字列の連続」→「1単語」として解釈されます。
10
+
11
+ 概念的には1単語なので何もしなければ勝手に折り返しません。
12
+ CSSなどで指定する方法はあります。
13
+ それも「よろしく折り返す」か「指定した幅で折り返す」かで指定の仕方も違ってきますので、
14
+ その辺りは調べてみてください。