[クロスブラウザ]CSSだけで長いURLや文字がはみ出さないようにボックスの中で折り返す方法。

スポンサーリンク

Crossbrow

こんにちは@sayobsです。今日紹介するのはCSSだけで長いURLや文字がはみ出さないようにボックスの中で折り返す方法です。

CSSを使う。

先日「iPhoneからフェイスブックにシェアする方法」を書いた時に記事に長いブックマークレットを書く必要がありました。しかし下の画像のように長いコードが記事からはみ出して大変な事になっています。

文字列がはみ出してる

これをはみ出さないように記事内で折り返す方法がWrapping Long URLs and Text Content with CSS : Perishable Pressで紹介されていました。

pre {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}

これで出来ました。クロスブラウザ対応です。

Crossbrow


初めて1人でOkinawaGramというウェブサービスを作ったので色々調べた事とか書いてみる。 | Last Day. jpタイトルの通りに初めて1人でウェブサービスを作ってみました。 …


コメントをどうぞ

メールアドレスが公開されることはありません。

またよし れい

執筆者:またよし れい

1983年、東京都葛飾区生まれ。アメリカのカレッジを卒業後独立。

2010年よりブログを立ち上げ、現在はブログ発信を中心に世界を旅しながら仕事をしている。

著書に『C言語すら知らなかった私がたった2か月でiPhoneアプリをリリースするためにやったこと』、『Facebookコミュニティ成功の法則』などがある。

これから起こる事を予想できる人間は居ません。唯一わかっているのは、人間は誰でも必ず死ぬという事だけです。僕は何度も言っていますが、「今」を楽しめない人は、この先の人生も楽しめないと思います。人生は「今」の連続で、その延長線上に未来はあるのです。過去に嫌な思い出があっても、「今」を楽しく生きる事で、過去の事実は変えられなくとも、過去の意味は変わってくるんではないでしょうか?

詳しいプロフィールはこちら>>>