Add ellipsis props for Title and Text components

[abdulgafur24]

Add ellipsis property for text components (Title, Text), so that value will be shown with ellipsis if the contained text is larger than the component width

Should look like :

<Text
  sx={{
    width: 100,
  }}
  ellipsis
>
  Some long long long text
</Text>

[rtivital]

You can add this with sx: <Text sx={{ textOverflow: 'ellipsis', overflow: 'hidden' }} />, adding this as prop is a bad idea. Text overflow can be very unreliable and depends on external conditions, for example, when the component is wrapped in flex container or does not have white-space: nowrap. I'd rather not manage these use cases on library level.