text-align-last
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2022å¹´9æ以éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
text-align-last 㯠CSS ã®ããããã£ã§ããããã¯ã®æå¾ã®è¡ããããã¯å¼·å¶çãªæ¹è¡ã®ç´åã®è¡ãã©ã®ããã«é
ç½®ããããè¨å®ãã¾ãã
試ãã¦ã¿ã¾ããã
text-align-last: right;
text-align-last: center;
text-align-last: left;
<section id="default-example">
<div>
<p id="example-element">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
</section>
section {
font-size: 1.5em;
}
#default-example > div {
width: 250px;
}
#example-element {
text-align: justify;
}
æ§æ
/* ãã¼ã¯ã¼ãå¤ */
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
/* ã°ãã¼ãã«å¤ */
text-align-last: inherit;
text-align-last: initial;
text-align-last: revert;
text-align-last: revert-layer;
text-align-last: unset;
å¤
auto-
text-alignã®å¤ã¨åãæ¹åã«é ç½®ããã¾ãããã ãtext-alignãjustifyã§ããå ´åã¯ãtext-align-lastã«startãè¨å®ããå ´åã¨åãå¹æã«ãªãã¾ãã start-
æ¸åæ¹åãå·¦æ¸ãã§ããã°
leftãå³æ¸ãã§ããã°rightã¨åãã§ãã end-
æ¸åæ¹åãå·¦æ¸ãã§ããã°
rightãå³æ¸ãã§ããã°leftã¨åãã§ãã left-
ã¤ã³ã©ã¤ã³ã³ã³ãã³ããè¡ããã¯ã¹ã®å·¦ç«¯ã«é ç½®ããã¾ãã
right-
ã¤ã³ã©ã¤ã³ã³ã³ãã³ããè¡ããã¯ã¹ã®å³ç«¯ã«é ç½®ããã¾ãã
center-
ã¤ã³ã©ã¤ã³ã³ã³ãã³ããè¡ããã¯ã¹ã®ä¸å¤®ã«é ç½®ããã¾ãã
justify-
ããã¹ãã¯ä¸¡ç«¯æãã«ãªãã¾ããããã¹ãã¯æ®µè½ã®å·¦ç«¯ããå³ç«¯ã¾ã§ã«é ç½®ããã¾ãã
å ¬å¼å®ç¾©
| åæå¤ | auto |
|---|---|
| é©ç¨å¯¾è±¡ | ãããã¯ã³ã³ããã¼ |
| ç¶æ¿ | ãã |
| è¨ç®å¤ | æå®éã |
| ã¢ãã¡ã¼ã·ã§ã³ã®ç¨®é¡ | é¢æ£å¤ |
å½¢å¼ææ³
text-align-last =
auto |
start |
end |
left |
right |
center |
justify |
match-parent
ä¾
æå¾ã®è¡ãä¸å¤®æãã«ãã
CSS
p {
font-size: 1.4em;
text-align: justify;
text-align-last: center;
}
çµæ
ä»æ§æ¸
| ä»æ§æ¸ |
|---|
| CSS Text Module Level 3 # text-align-last-property |