人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなブログの記法及びCSSに関する質問です。

たとえば
http://doyaling.hatenablog.com/entry/2015/02/22/010926
このエントリで、薄いグレーになっている引用部分は、

>|?|
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
||<

という記号で挟んであります。
プログラムのソースコードを書くときに使うものだと認識しているのですが、長い行について、
?一切折り返さないように(長い行のときは横スクロールするように)する
?上記のURLのようなやつは、単語の途中で折り返すようにする
というのはそれぞれ、可能なのでしょうか?


●質問者: doyaling
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

?一切折り返さないように(長い行のときは横スクロールするように)する
?上記のURLのようなやつは、単語の途中で折り返すようにする

?は、できます。?は、ちょっと微妙な感じ。

id:doyaling さんが使っているテーマだと、PRE タグに white-space: pre-wrap というスタイルが指定されています。
この指定が、単語の切れ目で改行を入れています。

white-space: pre というスタイルを指定すると、CSS で行の折り返しをせず、表示領域を超えた場合にはスクロールバーが表示されます。

単語の途中での折り返しは、word-wrap: break-word で指定します。
ただ、この指定は「必要に応じて」ということらしく、単語の切れ目があると、そこを優先して改行をします。
# 昔の IE は、ちょっと挙動が違ったはず

自分のブログでの見た目を一括で変えたいのであれば、「デザイン」の「デザインCSS」で以下のように書けば良いと思います。

pre {
 white-space: pre;
}

記事毎に変えたいのであれば、スーパーPRE記法を、DIV などで括って、CSS を個別に設定します。

<style>
#div-1 pre { /* id="div-1" の中の PRE */
 white-space: pre;
}
</style>
<div id="div-1"> <!-- これで括る -->
>|?|
var url1 = "http://localhost/oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
var url2 = "http://localhost/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/";
 ||< ※行頭の空白は、本当は入れない
</div>

はてな記法モードだと、記事中の style の中も行単位で P でくくられちゃうので、本当はこう書きます。

<!-- style を、一行で書く -->
<style> #div-1 pre { /* id="div-1" の中の PRE */ white-space: pre; } </style>
<div id="div-1"> <!-- これで括る -->
>|?|
var url1 = "http://localhost/oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
var url2 = "http://localhost/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/";
 ||< ※行頭の空白は、本当は入れない
</div>

ぼくのはてなブログで試してみてるので、見た目の違いを確認してみてください。
http://a-kuma3.hatenablog.com/entry/2015/02/22/221453


doyalingさんのコメント
ありがとうございます. 大変助かりました.
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ