9.1 屬性 text-indent
CSS 中的段落屬性在文本格式管理中扮演關鍵角色，確保可讀性和美觀度。其中，text-indent 和 text-align-last 是調整段落首行縮排和最後一行對齊的重要工具。
屬性 text-indent 控制區塊元素中首行文字的縮排。它經常被用來在段落開頭創建縮排，改善可讀性和文本結構。
值：
- 絕對值：固定單位的值，如像素 (
px)、點 (pt)、厘米 (cm) 等。例如，text-indent: 20px; - 百分比值：基於包含區塊寬度的百分比值。例如，
text-indent: 5%; - 負值：縮排可以是負值，這會導致文本左對齊超出容器邊界。例如，
text-indent: -20px;
使用示例：
CSS
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
HTML
<body>
<p class="indent-20px">這是首行縮排20像素的段落。</p>
<p class="indent-5percent">這是首行縮排為區塊寬度5%的段落。</p>
<p class="indent-negative">這是首行縮排為負20像素的段落。</p>
</body>
9.2 屬性 text-align-last
屬性 text-align-last 控制區塊元素中最後一行文本的對齊。這對於在段落中實現一致的對齊特別有用，尤其是當文本被設置為對齊寬度 (justify) 時。
值：
auto：最後一行如常文本對齊（默認值）left：最後一行左對齊right：最後一行右對齊center：最後一行居中對齊justify：最後一行與其他行一樣對齊寬度
使用示例：
CSS
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
HTML
<body>
<p class="justify-left">這是文本對齊寬度和最後一行左對齊的段落。</p>
<p class="justify-right">這是文本對齊寬度和最後一行右對齊的段落。</p>
<p class="justify-center">這是文本對齊寬度和最後一行居中的段落。</p>
<p class="justify-justify">這是文本和最後一行都對齊寬度的段落。</p>
</body>
9.3 屬性共同使用
屬性 text-indent 和 text-align-last 可以一起使用，以創建更複雜的段落格式，提升文本的可讀性和視覺結構。
HTML 和 CSS 示例：
CSS
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
HTML
<body>
<p class="styled-paragraph">
這個段落有30像素的首行縮排，文本對齊寬度，最後一行右對齊。
這展示了如何使用 text-indent 和 text-align-last 的組合來達到預期的格式效果。
</p>
</body>
代碼說明：
text-indent: 30px;：設置首行文本縮排為30像素text-align: justify;：文本對齊到容器的寬度text-align-last: right;：最後一行文本右對齊width: 300px;：設置文本容器的寬度border: 1px solid #000;：為文本容器加上邊框padding: 10px;：設置容器內的內邊距
GO TO FULL VERSION