HTML 横幅制限

HTMLで文章の横幅を制限する方法を教えてください

No.3 回答者： ORUKA1951 回答日時： 2014/06/19 19:04

＞aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

　それが、アルファベット文字で単語境界がないとすると厄介です。
　日本語(CJK)の場合は、単語途中で改行されますが、アルファベットの場合は単語境界でのみ改行されます。欧文文字の場合単語境界で改行されると意味が分からなくなるからです。

　例えば、次のようなHTMLがあったとします。

<p>
次のアルファベットを10文字で折り返しましょう。
</p>
<p class="Mondai">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>

スタイルシートで、段落は
p{text-indent:1em;line-height:16.em;}
と指定してあれば、追加で
p.Mondai{
margin:1em auto;
width:10ex;
text-indent:0;
line-height:1.2em;
font-size:1.5em;
word-break:break-all;
background-color:yellow;
padding:1ex;
}
とか指定してご覧なさい。大文字の場合はexではなくemで指定します。

No.2 回答者： ORUKA1951 回答日時： 2014/06/19 16:57

何もしなければウィンドウ幅ないしブロック幅で折り返されるはずですが？？？

文字数でなら・・
p{max-width:100em;}
それとも
section{width:100em;} 本文は横幅を文字数を基準
　　HTML4の場合は、div.section{width:100em;}
しかし、ユーザー（目の悪い人がCtrl+＋）などで文字を拡大すると広がっちゃうので、基本的にはサイズで決めたほうが良い

この回答への補足

たとえば
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
という形を
aaaaaaaa
aaaaaaaa
aaaaaaaa
aaaaaaaa
という形にしたいのです。

補足日時：2014/06/19 17:50

No.1 回答者： qualheart 回答日時： 2014/06/19 16:50

各要素の横幅は、普通DIVでブロック分けして、それぞれにCSSでwidth指定するのが一般的です。

ご参考まで。