テキスト周辺のCSSプロパティ

animation:none;
background:initial;
color:inherit;
cursor:auto;
display:inline;
font-family:sans-serif;
font-size:medium;
font-size-adjust:none;
font-style:normal;
font-weight:400;

letter-spacing:normal;

padding:0;

text-decoration:none;

text-shadow:none;
text-transform:none;
transform:none;
vertical-align:baseline;
word-break:normal;
hyphens:auto;

word-spacing:normal;
z-index:auto;
/* 他のプロパティの値により利用が制約される */
text-align:left;
line-height:normal;
position:static;
bottom:0;
left:0;
right:0;
top:0;

height:auto;
margin:0;
text-overflow:inherit;
white-space:normal;
width:auto;
tab-size:8;
all:none;
clip:auto;
first-letter:?;
first-line:?;
/* マイナーなプロパティ */

font-kerning:auto;
font-language-override:normal;
font-smooth:auto;
font-stretch:normal;
font-synthesis:weight;
font-variant-caps:normal;
font-variant-ligatures:normal;
font-variant-position:normal;
text-align-last:auto;
text-emphasis:none currentColor;
text-stroke:0 #000;
writing-mode:horizontal-tb}


Animation

Hello World

HTML

CSS

Background

Hello World

HTML

CSS

Color

Hello World

display

display:inline

Hello WorldHello WorldHello WorldHello WorldHello World

HTML

CSS

display:block

Hello WorldHello WorldHello WorldHello WorldHello World

display:flex

Hello World

Hello World

Hello World

Hello World

Hello World

HTML

CSS

display:list-item

Hello WorldHello WorldHello WorldHello WorldHello World

HTML

CSS

font-family

Hello WorldHello WorldHello WorldHello WorldHello World

HTML

CSS

font-size

Hello WorldHello WorldHello WorldHello WorldHello World

HTML

CSS

font-size-ajust

工事中

font-weight

Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World

HTML

CSS

letter-spacing

永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'

word-spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

英文の単語間のスペースのはばをカスタマイズできる。Defines normal space between words (0.25em) . This is default

HTML

CSS

line-height

永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'

HTML

CSS

padding

Hello WorldHello WorldHello WorldHello WorldHello World

text-shadow

Hello World

HTML

CSS

text-transform

hello worldhello worldhello worldhello worldhello worldhello world

HTML

CSS

z-index

Hello WorldHello WorldHello WorldHello WorldHello World

HTML

CSS

word-break

http://example.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

http://example.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

HTML

CSS

関連 &shy;,<wbr />

font-style

Hello WorldHello WorldHello World

HTML

CSS

transform

Hello WorldHello WorldHello WorldHello WorldHello World

HTML

CSS

text-align

hello worldhello worldhello world

HTML

CSS

vertical-align

hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world

HTML

CSS

text-decoration

Hello WorldHello WorldHello WorldHello World ※Hello World ※Hello World ※

HTML

CSS

position

Hello WorldHello WorldHello WorldHello WorldHello World

HTML

CSS

text-overflow

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

クリックすると、全文を表示します

HTML

CSS

width

squirrel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

CSS

height

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML