> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# نص

> أنشئ تنسيق طباعة السمة مع اقتطاع لسطر واحد أو عدد محدود من الأسطر.

## نظرة عامة

يوفر `Text` تنسيق الطباعة ومعالجة التجاوز. يعرض عنصر `div` افتراضيًا. احذف `size` و`weight` و`color` لمواصلة وراثة تنسيق الطباعة من محيطه.

**Light**

[مثال على النص (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال على النص (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-text--display)

## استخدام

امنح النص عرضًا مقيّدًا، ثم اضبط `truncate` لعرض علامة حذف عند تجاوزه:

```tsx theme={null}
import { Text } from 'twenty-ui/primitives/typography';

export const ContactName = () => (
  <Text truncate style={{ maxWidth: 160 }}>
    Alexandra Montgomery
  </Text>
);
```

## اختر تنسيق الطباعة

يستخدم `size` مقياس السمة الحالي. يغيّر حجم الخط، دون قيمة افتراضية للارتفاع أو font-family أو line-height:

| الحجم | قيمة السمة |
| - | - |
| `xxs` | `0.625rem` |
| `xs` | `0.85rem` |
| `sm` | `0.92rem` |
| `md` | `1rem` |
| `lg` | `1.23rem` |
| `xl` | `1.54rem` |
| `xxl` | `1.85rem` |

يقبل `weight` القيم `regular` (400) أو `medium` (500) أو `semibold` (600). يقبل `color` القيم `primary` و`secondary` و`tertiary` أو `light`. يرث كل prop مُهمَل بشكل مستقل. لا يغيّر الحجم المرئي العنصر الدلالي.

**Light**

[مقياس طباعة النص (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--typography-catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مقياس طباعة النص (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--typography-catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-text--typography-catalog)

للتسميات التوضيحية، اجمع بين الحجم الصغير ووزن semibold واللون light:

```tsx theme={null}
import { Text } from 'twenty-ui/primitives/typography';

export const Caption = () => (
  <Text size="xs" weight="semibold" color="light">
    Workspace
  </Text>
);
```

استخدم `style` الأصلي لألوان وقت التشغيل وقيود تخطيط العنصر الأب. تستهدف أصناف المستدعي وتركيب العرض عنصر النص نفسه. لا يضيف Text أي قيم افتراضية للطباعة عند إهمال هذه الخصائص.

## تحديد عدد الأسطر

**Light**

[خيارات تجاوز سعة النص (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[خيارات تجاوز سعة النص (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-text--catalog)

استخدم `lineClamp` مع عدد صحيح موجب. اختر إما `truncate` أو `lineClamp`؛ فخصائصهما متنافية.

```tsx theme={null}
import { Text } from 'twenty-ui/primitives/typography';

export const Summary = () => (
  <Text lineClamp={2} style={{ maxWidth: 240 }}>
    Follow up with the customer about their onboarding milestones and upcoming
    renewal.
  </Text>
);
```

## اختر عنصرًا

استخدم `render` عندما يحتاج النص إلى عنصر دلالي آخر:

```tsx theme={null}
import { Text } from 'twenty-ui/primitives/typography';

export const Description = () => (
  <Text render={<p />}>Account description</Text>
);
```

يؤثر الاقتطاع في العرض المرئي؛ ولا يختصر النص في DOM. وفّر طريقة لقراءة المحتوى الكامل عندما يكون الجزء المرئي غير كافٍ.

## الخصائص

تستهدف السمات الأصلية والعناصر التابعة والمراجع وأسماء الفئات والأنماط عنصر النص المعروض. يتم تصدير `TextProps` من `twenty-ui/primitives/typography`. يتم عرض محتوى النص دون تغيير، بما في ذلك الروابط التي يوفرها المستدعي.

**color** `"light" | "primary" | "secondary" | "tertiary"`

Semantic text color. Omitted values inherit; native style supports runtime colors.

**lineClamp** `number`

Positive integer limiting the number of visible lines. Cannot be combined with `truncate`.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Replaces the default div. Native props and the ref target the rendered text element.

**size** `"lg" | "md" | "sm" | "xl" | "xs" | "xxl" | "xxs"`

Font size from the theme scale. Omitted values inherit; this does not set height.

**truncate** `boolean`

Truncates one line with an ellipsis. Cannot be combined with `lineClamp`.

**weight** `"medium" | "regular" | "semibold"`

Theme font weight. Omitted values inherit.

## الترحيل

يختار `color` الآن لون سمة دلاليًا. انقل قيم ألوان CSS الاعتباطية من سمة `color` الأصلية إلى `style={{ color: customColor }}`. تستمر الأنماط والأصناف الحالية وتركيب العرض في استهداف عنصر النص.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.