Text should have max width of size-30

[pradyuk]

I am trying to get the account and subaccount title in the masthead to truncate with ellipses and tooltip on hover. I am using the tooltip prop which works well, but not sure how to address the "truncate with ellipse". Any examples will be helpful.

[corinne-nagel]

Hi @pradyuk could you please provide some screenshots/code of what you're talking about so we can give accurate guidance?

[pradyuk]

Sure, pasting the screenshot here.

[richbachman]

Hi @pradyuk Paste has a Truncate component that might be helpful here. Take a look at the examples and see if you can find the information there: https://paste.twilio.design/components/truncate#basic-truncate

[pradyuk]

Thanks @richbachman. That worked, but using truncate is changing the alignment of the text from center (whats seen in yellow).

Code looks like:
{parentAccount ? (
<Box
paddingLeft="space40"
paddingRight="space40"
marginLeft="space30"
fontSize="fontSize20"
lineHeight="lineHeight20"
backgroundColor="colorBackgroundSubaccount"
style={{ borderRadius: "12px" }}
data-testid={accountDropdownName.sid}
>



{accountDropdownName.friendlyName}




) : null}

[richbachman]

@pradyuk can I see a more complete code sample? If not, you might try to change the display prop on Box. Maybe try inline-block or inline-flex. I'm not sure what exactly would help without seeing more of a code sample. You can also drop the style={{ borderRadius: "12px" }} and use one of our BorderRadius tokens: https://paste.twilio.design/tokens/#radii

[pradyuk]

Thanks @richbachman! inline-flex worked! :)