CSS/text-align-last

الخاصية text-align-last في CSS تصف كيف تكون محاذاة آخر سطر نصي.

/* كلمات محجوزة */
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: unset;

القيمة الابتدائية	auto
تُطبَّق على	الحاويات الكتلية.
قابلة للوراثة	نعم
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدت.

أمثلة

مثال عن استخدام جميع الكلمات المحجوزة المدعومة في خاصية text-align-last، وسنكرر كل مثال مرتين، مرةً على فقرةٍ باللغة الإنكليزية (اتجاه النص من اليسار إلى اليمين)، ومرةً على فقرةٍ باللغة العربية (اتجاه النص من اليمين إلى اليسار)، لاحظ أنَّنا ضبطنا الخاصية text-align إلى start وذلك لمحاذاة جميع النص ما عدا آخر سطر:

<p class="start" dir="ltr">Testing <code>text-align-last: start</code>. Notice how the last line is aligned, and be aware that the rest of the element can be in a different align..</p>
<p class="start" dir="rtl">تجربة <code>text-align-last: start</code>.لاحظ كيف تختلف محاذاة آخر سطر عن بقية المحتوى، وانتبه كيف أنَّ بقية النص الموجود في العنصر قد يستعمل محاذاةً مختلفةً.</p>
<hr>

<p class="end" dir="ltr">Testing <code>text-align-last: end</code>. Notice how the last line is aligned, and be aware that the rest of the element can be in a different align..</p>
<p class="end" dir="rtl">تجربة <code>text-align: end</code>.لاحظ كيف تختلف محاذاة آخر سطر عن بقية المحتوى، وانتبه كيف أنَّ بقية النص الموجود في العنصر قد يستعمل محاذاةً مختلفةً.</p>
<hr>

<p class="left" dir="ltr">Testing <code>text-align-last: left</code>. Notice how the last line is aligned, and be aware that the rest of the element can be in a different align..</p>
<p class="left" dir="rtl">تجربة <code>text-align-last: left</code>.لاحظ كيف تختلف محاذاة آخر سطر عن بقية المحتوى، وانتبه كيف أنَّ بقية النص الموجود في العنصر قد يستعمل محاذاةً مختلفةً.</p>
<hr>

<p class="right" dir="ltr">Testing <code>text-align-last: right</code>. Notice how the last line is aligned, and be aware that the rest of the element can be in a different align..</p>
<p class="right" dir="rtl">تجربة <code>text-align-last: right</code>.لاحظ كيف تختلف محاذاة آخر سطر عن بقية المحتوى، وانتبه كيف أنَّ بقية النص الموجود في العنصر قد يستعمل محاذاةً مختلفةً.</p>
<hr>

<p class="center" dir="ltr">Testing <code>text-align-last: center</code>. Notice how the last line is aligned, and be aware that the rest of the element can be in a different align.</p>
<p class="center" dir="rtl">تجربة <code>text-align-last: center</code>.لاحظ كيف تختلف محاذاة آخر سطر عن بقية المحتوى، وانتبه كيف أنَّ بقية النص الموجود في العنصر قد يستعمل محاذاةً مختلفةً.</p>
<hr>

<p class="justify" dir="ltr">Testing <code>text-align-last: justify</code>. Notice how the last line is aligned, and be aware that the rest of the element can be in a different align..</p>
<p class="justify" dir="rtl">تجربة <code>text-align-last: justify</code>.لاحظ كيف تختلف محاذاة آخر سطر عن بقية المحتوى، وانتبه كيف أنَّ بقية النص الموجود في العنصر قد يستعمل محاذاةً مختلفةً.</p>

شيفرة CSS:

p {
  background-color: #f8f9fa;
  border: 1px solid #eaecf0;
  padding: 1em;
  margin: 1em;
  text-align: start;
}

.end     { text-align-last: end; }
.left    { text-align-last: left; }
.right   { text-align-last: right; }
.start   { text-align-last: start; }
.center  { text-align-last: center; }
.justify { text-align-last: justify; }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	47.0	49.0	غير مدعومة	مدعومة	غير مدعومة

البنية العامة

تقبل الخاصية text-align-last إحدى الكلمات المحجوزة الآتية.

القيمة auto

ستتم محاذاة آخر سطر وفقًا لقيمة text-align، إلا إذا كانت قيمة الخاصية text-align تساوي justify، وفي هذه الحالة ستكون قيمة هذه الخاصية مساويةً إلى start.

القيمة start

تسلك سلوك الكلمة المحجوزة left إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك right إذا كان اتجاه العنصر من اليمين إلى اليسار.

القيمة end

تسلك سلوك الكلمة المحجوزة right إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك left إذا كان اتجاه العنصر من اليمين إلى اليسار.

القيمة left

سيُحاذى آخر سطر إلى الحافة اليسرى من الصندوق السطري (line box).

القيمة right

سيُحاذى آخر سطر إلى الحافة اليمنى من الصندوق السطري (line box).

القيمة center

سيُحاذى آخر سطر إلى منتصف الصندوق السطري (line box).

القيمة justify

سيحاول المتصفح ملء كامل السطر بالنص من الحافة اليسرى إلى الحافة اليمنى من الصندوق السطري.

البنية الرسمية

text-align-last: auto | start | end | left | right | center | justify;

مصادر ومواصفات

• مسودة CSS Text Module Level 3.