新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

ChromeはCSSで設定しないと禁則処理してくれない

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

行末の「。」が先頭にきてしまうことがあるのはChromeだけだったのかな?
で、さすがに気になったので調べてみると、CSS表記で解決できることがわかった。
ちなみに、行頭に「。」が来るのを禁止することを禁則処理といいます。

修正前の状態
禁則処理前

スポンサーリンク
 

つまりはbodyにCSSで禁則の指定をしてあげる。
そのCSSは以下のとおり。
□ Chromeの行頭禁則がアレなのを解決 – たけみたの脱社会学日記

body {
word-break: normal;
word-wrap: break-word;
}

それぞれ解説すると。

「word-break」は改行をどう扱うかの設定。
それぞれ、以下のような指定ができる。
□ word-break-スタイルシートリファレンス

normal
英語等は単語の途中では改行せず、単語の切れ目で改行されます。日本語・中国語・韓国語等は表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。
break-all
言語に関係なく表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。
keep-all
言語に関係なく単語の途中では改行せず、単語の切れ目で改行されます。

「word-wrap」は単語途中で改行するかどうかの設定。
それぞれ以下のような指定ができる。 

word-wrap-スタイルシートリファレンス

normal
単語の途中で改行はしません。この場合、必要に応じて表示範囲を拡大します。
break-word
必要に応じて単語の途中で改行します。

どちらもCSS3で正式に採用されるかもしれないそうだ。

で、デザインカスタマイズを使ってこれをCSSに書き加えるのだが、ライブドアブログ(livedoorBlog)の僕の選んだベースデザインでは、なぜか、元々「word-break: break-all;」の表記があったので、これを残しておくと反映されないので注意。

修正後の状態
禁則処理後

 - デザイン, 印刷・DTP

アドセンス広告メイン

Comment

  1. タム より:

    はじめまして。
    この情報を探していました。
    助かりました。ありがとうございます。

タム へ返信する コメントをキャンセル

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

  関連記事

吉田佳代子リトグラフ展@ギャラリーA・C・S(名古屋)

1年以上前の記事です。内容が古い可能性があります。今度はかみさんの知り合いの個展 …

最近の雑誌は2種類のサイズで売っているらしい

1年以上前の記事です。内容が古い可能性があります。たまたま見かけた日経トレンディ …

Webからリアルの新しい形、雑誌「MarkeZine」2016年1月創刊

1年以上前の記事です。内容が古い可能性があります。雑誌から生まれたWebメディア …

no image
デザイン変更

1年以上前の記事です。内容が古い可能性があります。ブログのデザイン変更の詳細が分 …

佐野研二郎氏デザインの五輪ロゴ、盗作疑惑で撤回。大手広告代理店の専属デザイナーだからこそ必然

1年以上前の記事です。内容が古い可能性があります。五輪のロゴがパクリだとネットで …

Instagram(インスタグラム)でミニチュア風写真が撮れた

1年以上前の記事です。内容が古い可能性があります。一時期流行っていたミニチュア風 …

GIGAZINE(ギガジン)がトラックバックを封印

1年以上前の記事です。内容が古い可能性があります。GIGAZINE(ギガジン)さ …

no image
「zenback」のツイートボタンは @zenback へのメンションになる

1年以上前の記事です。内容が古い可能性があります。今度は「zenback」のちょ …

電子書籍ビジネスソリューション内覧会

1年以上前の記事です。内容が古い可能性があります。JGASで評判だったというフォ …

ツイッターから本?ツイッターを本?Twitterが角川書店と連携

1年以上前の記事です。内容が古い可能性があります。かつては2ちゃんねるやmixi …

血液型オヤジ