文字列のきりの良いところでの折り返し

質問

Yahoo検索結果の、関連検索では、
文字列が中途半端のところでは折り返さず、
きちんとまとまりで折り返してくれます。

（例として以下をあげてみます。
http://search.yahoo.co.jp/search?p=google+%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%88%E3%83%93%E3%83%A5%E3%83%BC

画面の幅を変えて見ると、

たとえば、
「google ストリートビュー 芸能人」
は、
「google ストリートビ」
「ュー 芸能人」
のように折り返すことはありません。

一方、普通は、たとえばこの関連検索の最後にある、「で検索」
の部分のように、で/検/索
のいずれでも切れてしまうものなのですが。）

これはどのようなCSSを書けば可能でしょうか。
よろしくお願いします。

回答No.2

naokita · ベストアンサー

＃１です。 今やっと正確な質問の意味がわかりました。

検索結果の説明文章の事だと思いましたが
一番下の虫がねアイコンの類似語句の検索メニューの事ですね？
例の「google ストリートビュー 芸能人」部分のリンクメニューを見落としていました。100件検索表示なので下まで見ていませんでした。失礼。

単なる文章なら折り返しますが
その部分は、仰る通りどんな環境でも折り返しません。
その部分のCSSは
a { white-space: nowrap }　　アンカーに対しての　nowrap です。

メニューでしたら li の float 設定 ＋ nowrap が一般的です。
h1,strong { white-space: nowrap }
なんてのも強調部分が読みやすくていいかもしれませんね。

お礼

質問がわかりづらくてすみません、おっしゃるとおりです。
おかげさまで解決いたしました。

white-space: nowrapがこのように便利に使えるとわかり
またひとつ疑問が解消しました。

ありがとうございます。

回答No.1

naokita

google　←のような英単語は、IE以外では折り返しません。
google ストリートビ
ュー 芸能人　←これは無いと書いていますが折り返します。

widthで幅が決まっていればその幅内で収まる分は折り返しされません。
幅が決まっていなければブラウザの幅を狭くすると折り返します。

日本語は、折り返してしまうので折り返したくない単語があれば
折り返し禁止にします。
<span style="white-space: nowrap">google ストリートビュー 芸能人</span>

もしくは、p を pre に変更して文章を書く。
<pre>
google ストリートビュー 芸能人
</pre>

日本語なので、新聞や本でも単語の途中で折り返すのが一般的ですので
メニュー以外は、そんなに気を使うことも無いと思いますが。

お礼

すみません、おっしゃるとおり
white-space: nowrap;
を書くことで思ったとおりの結果を得られました。
上記の補足を書いた後に気付きました。失礼いたしました。

こちらのサイトがまさに私のしたいことを紹介してくれていて、大変参考になりました。
http://css-happylife.com/log/css-template/000717.shtml

補足

>これは無いと書いていますが折り返します。
ということですが、そうでしょうか...？
私の環境では折り返さないようです。
(私はFirefox3,IE6,IE7,Operaで確認しました。)

質問の仕方が悪かったかもしれないので、
もう一度ほかの例で詳しく述べてみます。

例として、

http://search.yahoo.co.jp/search?p=%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88

ですと、ウィンドウ幅を十分な程度に広げたとき、

----------------------------------
一行目
スタイルシート テンプレート, css スタイルシート, ホームページ スタイルシート, html スタイルシート

二行目
みんカラ スタイルシート, スタイルシート リンク, スタイルシート 無料, スタイルシート テーブル

三行目省略
----------------------------------
と現在のところなっています。
(見やすくするためコンマ","をいれました。）

これを、幅を縮めていくと、
----------------------------------
一行目
スタイルシート テンプレート, css スタイルシート, ホームページ スタイルシート, html スタイルシー

二行目
ト, みんカラ スタイルシート, スタイルシート リンク, スタイルシート 無料, スタイルシート テーブル
----------------------------------

↓さらに縮めると

----------------------------------
一行目
スタイルシート テンプレート, css スタイルシート, ホームページ スタイルシート, html スタイルシ

二行目
ート, みんカラ スタイルシート, スタイルシート リンク, スタイルシート 無料, スタイルシート テーブル
----------------------------------
...のように折り返されていくのが普通(？)だと思うのですが、

そうはならず、

----------------------------------
一行目
スタイルシート テンプレート, css スタイルシート, ホームページ スタイルシート

二行目
html スタイルシート, みんカラ スタイルシート, スタイルシート リンク, スタイルシート 無料
----------------------------------

という様に、柔軟に変動してくれます。

これは何かうまいCSSの書き方によって実現しているのではないかと思う次第です。