gooブログの表示

質問

あるとき、長いＵＲＬを入れたときから、横長の表示になってしまいました。

元のとおりの幅狭・縦長の表示に戻したいのですが、どうすればよろしいのでしょうか。

回答No.1

nahomaria

通常英文などは単語の途中で改行されることはありません。
URLのような長い英数字は1つの単語としてみなされるので、
改行されずに表示されてしまいます。

URLにリンクさせているなら（<a href="URL">URL</a>）、
<a href="URL">○○○</a> というように、
リンク文字を適当なものに変更すればいいと思います。

ただ単にURLを記載しているなら、
CSSを編集するしかないのではないでしょうか。
# gooブログではカスタムテンプレートでしか編集できません

現時点でIEが独自に採用している「word-break」というものがあります。

『word-break－スタイルシートリファレンス』
http://www.htmq.com/style/word-break.shtml

文の改行の仕方を指定するものですが、
IE以外のブラウザでは動作しないのでご注意を。
# CSS3で実装されるようなので、
# いずれ他のブラウザも対応するかもしれません

私の場合ですが、
どのブラウザでもレイアウトを崩さないために

.word-break{
width:90%;
max-height:10em;
overflow:auto;
}

というclassを作って、
横幅・縦幅が指定している数値以上になった場合はスクロールさせてます。
# 本文の場合は <p class="word-break">URL</p> と記入してます

お礼

ありがとうございました。

補足

リテラシーが低いので、せっかくお教えいただいたコンテンツを十分に理解できていないのですが、インプットはテキストをペーストするとこのような事態となるというだけのことです。
難しい記載は能力がないので出来ません。

ちなみにＩＥではコンパクトに表示され、ファイアーフォックスでこうなるので、ＩＥで見るか、ファイアーフォックスで不自由に横に広げて見るかの選択になってはいるのですが・・・。

リテラシーを上げるためにもうちょっと締め切らずに置きます。