الخاصية text-align-last

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

بطاقة الخاصية

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

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

أمثلة

مثال عن استخدام جميع الكلمات المحجوزة المدعومة في خاصية 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.