HTML・CSS/フォント・テキスト - api_programming @ ウィキ

下位ページ

Content

http://coliss.com/articles/build-websites/operation/css/css-font-sizing-by-ire.html

webフォント

googleウェブフォント

http://gigazine.net/news/20161020-google-fonts-japanese-early-access/
https://googlefonts.github.io/japanese/

icomoon

解説
http://univ.peraichi.com/20

テキストの処理

指定した幅から溢れ出した文字列の処理

基本は

text-overflow

で処理。"…"を表示させるには

text-overflow : ellipsis;
overflow : hidden;
white-space : nowrap;

overflow と white-space も指定が必要か？chromeでは全部必要だった。
https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow

指定した幅から溢れ出したものを改行させる場合の処理

text-wrap

で処理
行の折り返しは

word-break

で処理（改行に対する禁則処理）
https://developer.mozilla.org/ja/docs/Web/CSS/word-break
http://www.htmq.com/css3/word-break.shtml
溢れ出したら表示させない場合は

white-space : nowrap

を指定する。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space

overflow : hidden
(overflow-x, overflow-y)

だと、途中で切れる（文字の上半分だけ見えていたりする）
MDN-開発者向けのWeb技術-CSS-overflow
HTMLクイック・リファレンス-スタイルシートリファレンス-overflow

ツールチップで表示させる

<div title="...">###</div>

グローバル属性として規定されているtitleが使用できる。
MDN グローバル属性 title