HTMLの”pタグ”の改行についてご教授ください

htmlとcssを勉強中です。
現在line-heightを勉強しているのですが、htmlの改行について
不明点があります。

発生している問題・エラーメッセージ

教材では、１つのpタグで囲った文言を
ブラウザで表示すると、2行で表示されているのですが
自分でコードを書いて、ブラウザで開くと1行でしか表示されません。


### 該当のソース
　　<p>ソースコードソースコードソースコードソースコードソースコードソースコード
   ソースコードソースコードソースコードソースコードソースコードソースコード</p>

試したこと

・使用しているatomエディタのソフトラップを設定

・<br>タグの使用や、pコードを2つにすることで改行はされたのですが
教材と異なるコードのせいか、line-heightの高さがお手本と違うため
気になってしまう

補足情報（FW/ツールのバージョンなど）

エディタとブラウザは教材と同じですが
osのみ異なります。（先方はmac os)

使用しているエディタ:Atom
ブラウザ:chrome
os:windows10

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

回答2件

教材では、１つのpタグで囲った文言を

ブラウザで表示すると、2行で表示されているのですが
自分でコードを書いて、ブラウザで開くと1行でしか表示されません。

ブラウザ環境やフォントサイズが違えば、簡単に文字のレイアウトは変化します。

実際のHTML作成にあたっても、文字の寸法は環境によって変化しうることを前提に作る必要があります。

投稿2018/08/18 08:53

maisumakun

総合スコア145183

ベストアンサー

文字の高さ（大きさ）が，閲覧者の環境設定によって変わってくることはmaisumakunさんが説明してくださった通りです．
もちろん，ある程度は使用するフォントの種類やサイズを指定できますし，閲覧者のコンピュータ上に任意のフォントがなければ，随時インストールさせる，ということもできますが，常にそれで上手くできるとは限りません．
そのため，文章が主な内包要素となる場合，サイズ指定をemやremなどの単位を使って行うことがあります．

また，改行の仕方もCSSで色々指定できます．以下に例を示しておきます

html
1<div><!--勝手に改行される-->
2Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3</div>
4
5<div class="a"><!--改行されない-->
6Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
7</div>
8
9<div><!--改行されない-->
10Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.
11</div>
12
13<div class="b"><!--改行される-->
14Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.
15</div>

css
1div{
2  padding: 1em;
3  border: 1px solid;
4  margin: 2em;
5  background: skyblue;
6}
7
8.a{
9  white-space: nowrap;
10  background: #66cdaa;
11}
12
13.b{
14  word-break:break-all;
15  background: #66cdaa;
16}