.text-truncate
//幅が固定されている前提で。
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
This text should wrap.
This text should overflow the parent.
Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.
Lowercased text.
Uppercased text.
.text-dell { text-decoration: line-through; }
.text-dell-r { text-decoration-line: line-through;
text-decoration-color: red; }
Bootstrapのテキスト設定を日本語表示で最適化されたものに変更する
フォント設定、line-height、letter-spacingは、お好みで変更。フォントは、Fontタブを参考。
// > はどう
:root{
--font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
// ただし、letter-spacing を設定するとtext-alignで微妙にずれる
// text-align:center の場合、text-indent: ○○; で先頭にスペースを入れて調整
// text-align:right の場合、margin-right: -○○; で右にネガティブマージンを入れて調整
body {
/* 除外した！ 縦書きレイアウトでIEで,num 箇所がおかしくなった
font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, 'Open Sans', sans-serif;
*/
line-height: 1.65;
letter-spacing: 0.2em;
color: #3c3c3c;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, 'Open Sans', sans-serif;
}
縦書きレイアウトで
表現の幅が広がります。
2020年はコロナで大変な年になりました。
緊急事態宣言が2020年4月7日に7都府県で発出され、4月16日に全国に拡大されました。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
//ie11 ok!
.vtxtbox {
text-align: right;
}
.vtxt {
text-orientation: upright;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-align: left;
display: inline-block;
}
// フォント設定によっては、崩れる可能性あり、
// Bodyのフォント設定を除外した！ 縦書きレイアウトでIEで,num 箇所がおかしくなった
// :root のフォント設定は必要？
// andridでnumが崩れる。本家サイトは崩れてない！
blw-l under-蛍光ペン（動かないタイプ）：のこの文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
blw-l under-蛍光ペン（動かないタイプ）：のこの文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
下線オレンジこの文章はダミーです。
これはダミーのテキストです。サンプルになります。 最終的には正式な文章が入ります。。ここに本文が入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
これはダミーのテキストです。サンプルになります。 最終的には正式な文章が入ります。。ここに本文が入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
下線オレンジ：この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
これはダミーのテキストです。サンプルになります。 最終的には正式な文章が入ります。。ここに本文が入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
これはダミーのテキストです。サンプルになります。 最終的には正式な文章が入ります。。ここに本文が入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
下線オレンジ：この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
蛍光ペン（動かないタイプ）
RIGH&TLEFT
TOP&DOWN
http://creatornote.nakweb.com/half_css/
取り入れたい装飾
https://ferret-plus.com/6821
クレヨン風
https://hatena19.com/various-fluorescent-markers-with-css/
http://photoshopvip.net/115612
「課題」色別・太さ別に対応。短い文でも反応。縦書きでズレるので修正。
これはダミーのテキストです。サンプルになります。 最終的には正式な文章が入ります。。ここに本文が入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
これはダミーのテキストです。サンプルになります。 最終的には正式な文章が入ります。。ここに本文が入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
下線アニメーションのこの文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
下線アニメーション：この文章はダミーです。
これはダミーのテキストです。サンプルになります。 最終的には正式な文章が入ります。。ここに本文が入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
これはダミーのテキストです。サンプルになります。 最終的には正式な文章が入ります。。ここに本文が入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
下線アニメーション：この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
これはダミーのテキストです。サンプルになります。 最終的には正式な文章が入ります。。ここに本文が入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
これはダミーのテキストです。サンプルになります。 最終的には正式な文章が入ります。。ここに本文が入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
下線アニメーション：この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
動く下線アニメーション
表示領域を外れると消える。
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
This text should wrap.
This text should overflow the parent.
Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
Lowercased text.
Uppercased text.
CapiTaliZed text.
Lowercased text.
Uppercased text.
CapiTaliZed text.
Bold text.
Normal weight text.
Light weight text.
Italic text.
This is in monospace
Bold text.
Normal weight text.
Light weight text.
Italic text.
This is in monospace
Muted text with a reset link.
Muted text with a reset link.