このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

css3 word-break word-wrap 禁則処理について考える

CSS3

2012.05.27

この記事は最終更新日から1年以上が経過しています。

まず、word-wrapとword-breakについて、

word-wrap

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

word-break

normal
CJKは厳格に改行制限される、非CJKはそれら自身のルールに従って改行される(初期値)
keep-all
CJKは改行しない、非CSKはnormalと同じ(keep-allは、韓国語のようにホワイトスペースの存在が改行のきっかけとなる場合にのみ使用するべき値)
loose
CJKはより緩やかな改行制限となる、非CSKはnormalと同様
break-strict
CJKはnormalと同様、非CJKはどこでも改行できる(break-strictは、CJK文字が中心で非CJKの抜粋をわずかに含むようなテキストを、それぞれの行に均等に分布させたいときに使用されることがほとんど)
break-all
CJKはlooseと同様、非CJKはbreak-strictと同様

との事です。こちらを参考しております。

CSS3リファレンス

http://www.htmq.com/css3/word-break.shtml

うん。難しいですね。(笑)

一つずつ解説を。

word-wrap

うーん。違いが分かりませんね。

word-break

word-breakに関しては違いが現れます。

normalだと文法を考慮し改行されます。break-allだと文法を考慮せず、文字いっぱい表示し、改行されます。

基本、ホワイトスペースをきっかけに改行するかしないか。を判断します。

では、ここから現場であった事を、

まず、以下のような(デザインは全くちがいますが)ボタンがあるとします。

文字が2行になる可能性があるので、対応して欲しい。つまり2行になった時

このような形になればいいのですが、普通に組むと無理があるので、

display: table-cell;を指定し、vertical-align:middle;にしました。

すると、2行になった場合上のようないい感じになるのですが、問題が

文字が増えたとき、溢れ出します。

よって、word-break:break-all;を指定。

テキストが収まってくれます。

良かった。と思いますが、今度は

改行される部分がここでは、問題がある!

となりました。

確かに問題ですが。ほぼ詰みました。(笑)

どちらかを選択しないといけないですよねー。

また、word-wrap: break-word;を指定すると、

word-wrap: break-word;

ホワイトスペースで改行されるのですが、文字が増えた場合やっぱりはみ出します。。

また、word-break: keep-all;も同様でした。

適切なのは、word-break:break-all;を指定し、改行(br)を含めれる。

ということに落ち着きました。

Comment

Related Article

CSS ファイル簡単生成。APBCSS ファイルジェネレーターツール「APB CLI」の使い方。

2017.06.18

「compass」をやめて、爆速「Libsass」に変えたら作業が超捗った件。

2016.06.11

「CSSが難しい。。」「CSSが面倒。。」 と言ったエンジニアさんにもオススメのCSS設計! 「APBCSS(Atomic Parts Base CSS)」が良い感じ!

2016.03.28

2016年は「AtomicDesign」を取り入れた「APB CSS(Atomic Parts Base CSS)」で迷わず、簡単、拡張性持った CSS設計を!

2016.01.02

CSS3アニメーション をスマートフォンサイトで 綺麗に作りたいあなたへ

2014.08.25

フロントエンド パフォーマンス向上について まとめ

2014.01.07

前回に続いて、SPEC vol.4で3位受賞しました。

2012.07.28

前回に続いて、SPEC vol.4に参加しております。

2012.07.15

CSS3のみでAjax風 ページネーション(ページ送り) JavaScript無し

2012.06.03

CSSでフォームパーツ(input,checkbox,etc…)をカスタマイズ

2012.06.03

CATEGORY LIST

LATEST NEWS

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

tool

2018.03.27

Macで、VHSダビング I-O DATA ビデオキャプチャー 「アナレコ」を使ってみた。

tool

2018.03.27

ご報告

イベント

2018.02.02

明けましておめでとうございます。(遅め

イベント

2018.01.16

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US