word-break: break-all
英単語の間であっても自動改行されるように、word-breakプロパティーでbreak-allを採用しているウェブサイトが地味に増えているような印象だ。コスメティックな理由で見出しやサムネイルの付記などに使うのは悪くない妥協だと思うが、本文にもわりと気軽に使われていてかなり気になる。 日本語では特に単語の切れ目という論理的な箇所は存在せず、ブラウザーではどこでも自動改行される。せいぜい句読点が行頭にならないように制御されるくらいだ。word-breakプロパティーではこの自動改行における単語の禁則処理を制御できる。値としてbreak-allを指定すると禁則処理が解除され、現在のブラウザーの実装では以下のような事象が起こる。 英単語の間で改行される 行頭でも記号が許可される 前者がわかりやすく、これを目的としていることが多い。こうすることによってタイポグラフィーでいうところのflush le
長い英単語を途中で折り返したいときの CSS の指定方法: Days on the Moon
ヨーロッパ系の言語では基本的に単語の途中に折り返しを入れません。しかし、幅の狭い領域に長い英単語を記述するときや、笑いを表す「www…www」のように欧文文字を表現に組み込むときなど、欧文文字同士の合間で折り返したいと思うかもしれません。そのような折り返しの制御を CSS で行うにはどうすればよいのでしょうか。 2013 年 6 月時点の結論 word-wrap: break-word を使うとどうなるのか word-break: break-all を使うとどうなるのか word-wrap: break-word と word-break: break-all を両方使うとどうなるのか なぜ word-break: break-all ではなく word-wrap: break-word を勧めるのか どこに word-wrap: break-word を指定するのか position:
Webでの文字のレイアウトについて - 2011年に試してみたこと - - くらげだらけ
2011年の後半あたりから文字や文字組に興味を持ち始めました。元々、大学時代に文字についての勉強をちゃんとできていなかったことが、ある種のコンプレックスのように感じていました（今もそうです）。そのうえで「デザイナー」という肩書きを持っていることを嫌って、名刺にデザイナーではなく「制作」とわざわざ入れたこともありました。 そんなこんなで過ごしながら今年読んだ本が「文字をつくる―9人の書体デザイナー」と「文字講座」という本でした。どちらの本にも文字がどんなふうにできたのか、どんな想いでできたのかといったことが書かれていて、非常に面白かったです。それから書体や文字組に関する本を読んだりして少しずつですが勉強している毎日です。 最近では電子書籍が少しずつ読めるようになって来ました。私もiPhoneで読んだり、iPadで読んでみたりしています。私もWebに関する仕事をしているので、最近ではWebの文
[夢日記]CSS交換所 - はてな匿名ダイアリー
CSSを切手と交換してくれるというので、交換所に列ができていた。 列に並んでいる人はみんな、おじいさんも若いおねえさんも、紙粘土の塊のようなものを手に持っていて、それがCSSであるらしかった。僕も家に帰って、いつか作ったきりでほうりっぱなしにしていたCSSを取ってきて、列に加わった。 僕の番になった。机の上には野菜くずが散らばっていた。交換所の人にCSSを渡すと、キャベツをくれた。とてもいきいきとしていてみずみずしくて、桃太郎のように中からキャベツ太郎が生まれてきそうなくらいにエネルギーいっぱいのキャベツだった。僕はその元気なキャベツを両手で抱えて帰った。 帰り道、道の両側の白い塀に「border-bottom:solid;」だとか「display:none;」などといったCSSが落書きされていた。最近はこんな単語を書くのが流行っているのだろうか。それとも書いた人はこの塀のスタイルを変えよ
![[夢日記]CSS交換所 - はてな匿名ダイアリー](https://cdn-ak-scissors.b.st-hatena.com/image/square/b1638cdb5807a4788e4ba3c1109a984166e095fc/height=288;version=1;width=512/https%3A%2F%2Fanond.hatelabo.jp%2Fimages%2Fog-image-1500.gif)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
