liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0の各種修飾 - テキスト関連属性

CSS3.0 ┗━CSS3.0の各種修飾 
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title>テキスト関連属性</title>
   <style type="text/css">
    div{
        border:1px solid #000000;
        height: 40px;
        width: 200px;
    }
    </style>
</head>
<body>
<!-- インデント20pt -->
text-indent:20pt <div style="text-indent:20pt">テスト文字列</div>
<!-- インデント40pt -->
text-indent:40pt <div style="text-indent:40pt">テスト文字列</div>
<!-- 中央揃い -->
text-align:center <div style="text-align:center">テスト文字列</div>
<!-- 右揃い -->
text-align:right <div style="text-align:right">テスト文字列</div>
<!-- RTL -->
direction:rtl <div style="direction:rtl">テスト文字列</div>
<!-- LTR -->
direction:ltr <div style="direction:ltr">テスト文字列</div>
<!-- brまで改行しない -->
white-space:nowrap <div style="white-space:nowrap">
    テスト文字列ｷテスト文字列テスト文字列テスト文字列</div>
<!-- 溢れた際に切る -->
text-overflow:clip <div style="overflow:hidden;white-space:nowrap
  ;text-overflow:clip;">テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列</div>
<!-- 溢れた際に・・・表示 -->
text-overflow:ellipsis <div style="overflow:hidden;white-space:nowrap
  ;text-overflow:ellipsis;">テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列</div>
<!-- 単語で改行 -->
word-break:keep-all <div style="word-break:keep-all">
The root interface in the collection hierarchy. </div>
<!-- 単語途中でも改行 -->
word-break:break-all <div style="word-break:break-all">
The root interface in the collection hierarchy. </div>

<!-- 長い単語、URL中間改行はブラウザデフォルトに任せる -->
word-wrap:normal <div style="word-wrap:normal;width:140px;">
google domain is http://google.com.com.com.com</div>
<!-- 長い単語、URL中間改行 -->
word-wrap:break-word <div style="word-wrap:break-word;width:140px;">
google domain is http://google.com.com.com.com</div>

</body>
</html>

f:id:liguofeng29:20160129222504p:plain