الفرق بين المراجعتين لصفحة: «CSS/text-align-last»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>text-align-last</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>text-align-last</code>}}</noinclude> | ||
الخاصية <code>text-align-last</code> في CSS تصف كيف تكون محاذاة آخر سطر نصي. | الخاصية <code>text-align-last</code> في CSS تصف كيف تكون محاذاة آخر سطر نصي. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 32: | سطر 20: | ||
|كما حُدِّدت. | |كما حُدِّدت. | ||
|} | |} | ||
<syntaxhighlight lang="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; | |||
</syntaxhighlight> | |||
== أمثلة == | == أمثلة == | ||
| سطر 92: | سطر 96: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>text-align-last</code> إحدى الكلمات المحجوزة الآتية. | تقبل الخاصية <code>text-align-last</code> إحدى الكلمات المحجوزة الآتية. | ||
=== | === <code>auto</code> === | ||
ستتم محاذاة آخر سطر وفقًا | ستتم محاذاة آخر سطر وفقًا ل<code>[[CSS/text-align|text-align]]</code>، إلا إذا كانت الخاصية <code>[[CSS/text-align|text-align]]</code> تساوي <code>justify</code>، وفي هذه الحالة ستكون هذه الخاصية مساويةً إلى <code>start</code>. | ||
=== | === <code>start</code> === | ||
تسلك سلوك الكلمة المحجوزة <code>left</code> إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك <code>right</code> إذا كان اتجاه العنصر من اليمين إلى اليسار. | تسلك سلوك الكلمة المحجوزة <code>left</code> إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك <code>right</code> إذا كان اتجاه العنصر من اليمين إلى اليسار. | ||
=== | === <code>end</code> === | ||
تسلك سلوك الكلمة المحجوزة <code>right</code> إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك <code>left</code> إذا كان اتجاه العنصر من اليمين إلى اليسار. | تسلك سلوك الكلمة المحجوزة <code>right</code> إذا كان اتجاه العنصر من اليسار إلى اليمين، وستسلك سلوك <code>left</code> إذا كان اتجاه العنصر من اليمين إلى اليسار. | ||
=== | === <code>left</code> === | ||
سيُحاذى آخر سطر إلى الحافة اليسرى من الصندوق السطري (line box). | سيُحاذى آخر سطر إلى الحافة اليسرى من الصندوق السطري (line box). | ||
=== | === <code>right</code> === | ||
سيُحاذى آخر سطر إلى الحافة اليمنى من الصندوق السطري (line box). | سيُحاذى آخر سطر إلى الحافة اليمنى من الصندوق السطري (line box). | ||
=== | === <code>center</code> === | ||
سيُحاذى آخر سطر إلى منتصف الصندوق السطري (line box). | سيُحاذى آخر سطر إلى منتصف الصندوق السطري (line box). | ||
=== | === <code>justify</code> === | ||
سيحاول المتصفح ملء كامل السطر بالنص من الحافة اليسرى إلى الحافة اليمنى من الصندوق السطري. | سيحاول المتصفح ملء كامل السطر بالنص من الحافة اليسرى إلى الحافة اليمنى من الصندوق السطري. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
مراجعة 14:35، 26 يوليو 2018
الخاصية 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.