タグ・デザイン掲示板

[

【解決済】半角英数字だけ表示がおかしい
by りっか

2016-11-05 00:54
端から端まで書ききってたら、ふつうは次の行へと文字が移るのに、半角英数字だけひたすら横に伸びていきます。

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

日本語だけだと↑のように、枠の中いっぱいいっぱいになったら次の行に移って表示されるのですが、半角英数字は横スクロールしないと見えなくなるのです。
タグがおかしいのかなと思ってるんですが、どこがおかしいのか全く分からないので、添削をお願いします。

◆文書型宣言
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

◆HEAD内
<style type="text/css">

/* 以下パソコン、スマホ、ガラケー共通設定 */

a{
text-decoration: none;
border-bottom: dotted 1px #666666;
}

a:hover{
color: #888888;
}

</style>

<pc_only><style type="text/css">

/* ここからパソコン向け設定 */

.all{
font-family: メイリオ, 'Trebuchet MS', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Verdana, Helvetica;
letter-spacing: 2pt;
font-size: 88%;
line-height: 1.8;
text-align: left;
width: 600px;
margin: 0 auto;
background: #ffffff;
}

.title{
border-bottom: double 3px #b0c4de;
font-size: 150%;
color: #666666;
padding: 30px 0 0 0;
}

.main{
padding: 30px 0 5px 0;
}

.postscript{
border-top: double 3px #b0c4de;
padding: 10px 0 10px 0;
}

br{
letter-spacing: normal;
}

</style></pc_only>
<smartphone><style type="text/css">

/* ここからスマホ向け設定 */

.all{
font-size: 82%;
line-height: 1.6;
text-align: left;
background: #ffffff;
}

.title{
border-bottom: double 3px #b0c4de;
font-size: 120%;
color: #666666;
margin: 30px 10px 0 10px;
}

.main{
margin: 30px 10px 5px 10px;
}

.postscript{
border-top: double 3px #b0c4de;
margin: 10px;
}

</style></smartphone>

<nopc><style type="text/css">

/* ここからガラケー向け設定 */

.all{
font-size: 76%;
line-height: 1.5;
text-align: left;
background: #ffffff;
}

.title{
border-bottom: double 3px #b0c4de;
font-size: 110%;
color: #666666;
margin: 30px 10px 0 10px;
}

.main{
margin: 30px 10px 5px 10px;
}

.postscript{
border-top: double 3px #b0c4de;
margin: 10px;
}

</style></nopc>

◆子ページの本文入力画面
<div class="all"><div class="title">タイトル</div><div class="main">本文　必読の内容やリンクなど</div></div>

pc
[編集]

by と

2016-11-05 13:35
スペース等の区切りなしで半角英数字を書いた時に画面からはみ出るのは不具合ではありません
折り返しが必要なら.allあたりに
word-wrap : break-word;
overflow-wrap : break-word;
を追記してみては

pc
[編集]

by りっか

2016-11-22 13:31
お返事が遅くなり、大変申し訳ありません。

不具合ではないとのことで、安心しました。
また、改善のためのタグもありがとうございます。無事解決いたしました。

pc
[編集]

[