表組み風の画像一覧を作る方法について (No. 1154)

質問

すぐ使えるCGI 画像付 ウェブページ更新ツール 大容量版 （日本語 UTF-8 版）Ver. 4.3
をあるサイトで使わせていただこうと検討中です。
そこで、一覧ページを表組風にしようとhttp://sugutsukaeru.jp/support/165/index.html
を参考に作成したところ、表示の確認もできましたが、タイトルの文字が多くなると、article_list.txt で
<div style="
    float:left;
    text-align: center;
    font-size: 0.9em;
    width: 120px;
    height:120px;
    background-color: #ffffff;
    margin: 20px;
    overflow: visible;
">
と書いているのに、タイトルの文字が自動敵に改行されず、
なおかつ、表がづれてしまいます。。。

CGIについては超初心者で大変申し訳ございませんが、
何卒ご教授よろしくお願いいたします。

回答

「すぐ使えるCGI」のご利用誠にありがとうございます。

■最初の確認点：テスト入力の文字列

CSS（style属性）の表示の問題はブラウザによっても異なり色々な原因が考えられるのですが、タイトルの改行がされない場合、まず、テストの入力として「aaaaaaaaaaaaaa」など半角アルファベットだけを連続して入力されていたりはしませんでしょうか？

ブラウザによっては、半角英数字を続けて入力した場合それを英文1単語とみなして全く改行されない、という問題が起こります。また、改行ができないとCSSの幅などの指定が実現できず、それが原因で表示が大きく崩れる場合があります。

このため、まずテスト入力を通常の運用で考えられるような日本語や英語などの表現で行っているかご確認下さい。


■CSSの設定確認

テストの入力に特に問題が無い場合、タイトルを表示している要素にCSSの改行しない設定（ white-space: nowrap ）が付いてしまっていないかご確認下さい。

例えば、「サイト共通の CSS ファイルで h3,h4 {white-space: nowrap;} を指定をしていて、表組内のタイトル表示にも <h3> または <h4> を使用している」などです。


■その他の問題

上記の2つの可能性が当てはまらず問題が解消しない場合、ページ全体の設定を拝見させていただいてよろしいでしょうか？

問題の起きているページの URL か、または一連のページを圧縮してメールでお送りいただければ幸いです。掲示板ご回答をご連絡するメールを送信させていただきましたので、そのメールにご返信でご連絡下さい。